Quiero seleccionar la ID de los padres al hacer clic en cualquier equipo, así que, básicamente, si alguien hace clic en un equipo de la Premier League, quiero que la ID 2 se asigne a una variable league_id.

Lo que ya he probado:

Más cercana

$('ul.subbar li a').on('click', function(e) {
e.preventDefault();
var team_id = $(this).attr("id");
var league_id = $(this).closest('li').attr('id');

Parent Parent

$('ul.subbar li a').on('click', function(e) {
e.preventDefault();
var team_id = $(this).attr("id");
var league_id = $(this).parent().parent().attr('id');

Los padres son los primeros

$('ul.subbar li a').on('click', function(e) {
e.preventDefault();
var team_id = $(this).attr("id");
var league_id = $(this).parents('ul:first').attr('id');

Esta es mi estructura HTML:

        <li class="countries" id="2"><img src="{% static "images/england.png" %}" alt="england">Premier League
          <ul class="subbar">
            <li><a class="team" id="12">FC Liverpool</a></li>
            <li><a class="team" id="13">Manchester City</a></li>
            <li><a class="team" id="17">Tottenham Hotspur</a></li>
            <li><a class="team" id="14">Manchester United</a></li>
            <li><a class="team" id="11">Leicester City</a></li>
            <li><a class="team" id="6">FC Chelsea</a></li>

Así que básicamente necesito saltar dos niveles hacia arriba.

La consola siempre me registra undefined

1
Phanti 4 oct. 2019 a las 15:27

3 respuestas

La mejor respuesta

Puedes hacerlo así:

var league_id = $(this).closest('li.countries').attr('id');

Demostración

$('ul.subbar li a').on('click', function(e) {
  e.preventDefault();
  var team_id = $(this).attr("id");
  var league_id = $(this).closest('li.countries').attr('id');
  console.log("team_id",team_id)
  console.log("league_id",league_id)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="countries" id="2"><img src="{% static " images/england.png " %}" alt="england">Premier League
    <ul class="subbar">
      <li><a class="team" id="12">FC Liverpool</a></li>
      <li><a class="team" id="13">Manchester City</a></li>
      <li><a class="team" id="17">Tottenham Hotspur</a></li>
      <li><a class="team" id="14">Manchester United</a></li>
      <li><a class="team" id="11">Leicester City</a></li>
      <li><a class="team" id="6">FC Chelsea</a></li>
    </ul>
  </li>
</ul>
3
Carsten Løvbo Andersen 4 oct. 2019 a las 12:32

Puede usar closest como lo hizo en uno de sus intentos, solo necesita agregar un selector de clase para que se pueda obtener la identificación correcta.

$(function(){
  $('ul.subbar li a').on('click', function(e) {
    e.preventDefault();
    var team_id = $(this).attr("id");
    var $parent = $(this).closest('li.countries');// just added countries class with li so that correct li can be find.
    var league_id = $parent.attr('id'); 
    console.log(league_id);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<li class="countries" id="2"><img src="{% static "images/england.png" %}" alt="england">Premier League
          <ul class="subbar">
            <li><a class="team" id="12">FC Liverpool</a></li>
            <li><a class="team" id="13">Manchester City</a></li>
            <li><a class="team" id="17">Tottenham Hotspur</a></li>
            <li><a class="team" id="14">Manchester United</a></li>
            <li><a class="team" id="11">Leicester City</a></li>
            <li><a class="team" id="6">FC Chelsea</a></li>
           </ul>
       </li>
3
Bhushan Kawadkar 4 oct. 2019 a las 12:30

Si desea obtener la identificación del elemento padre, simplemente puede usarlo.

var league_id = $(this).parents('li').attr('id')
//OR Another way
var league_id = $(this).parents().attr('id')
0
Ankit Bharti 4 oct. 2019 a las 12:58