Как я могу выбрать идентификатор родителя с помощью jQuery?

Question

Я хочу выбрать родительский идентификатор родителей при нажатии на любую команду, поэтому, если кто-то нажимает на команду Премьер-лиги, я хочу, чтобы идентификатор 2 был назначен переменной league_id.

То, что я уже сделалпопробовал:

Ближайший

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

Родитель-родитель

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

Родители ul first

$('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');

Это моя структура 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>

В общем, мне нужно прыгнуть на два уровня вверх.

Консоль всегда регистрируетсяя undefined

Answer 1

Вы можете сделать это так:

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

Демо

$('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>

Answer 2

Вы можете использовать closest, как вы это делали в одной из ваших попыток, вам просто нужно добавить селектор класса, чтобы можно было получить правильный идентификатор li.

$(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>

Answer 3

Если вы хотите получить идентификатор родительского элемента, вы можете просто использовать его.

var league_id = $(this).parents('li').attr('id')
//OR Another way
var league_id = $(this).parents().attr('id')