CODEWITHSUNDEEP
javascriptjqueryhtml
JSRB
JSRB

Reputation: 2623

How can I select the ID of the parent using jQuery?

I want to select the parents parent ID when clicking on any team, so basically if someone clicks on a Premier League Team, I want the ID 2 assigned to a variable league_id.

What I've already tried:

Closest

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

Parents 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');

This is my HTML structure:

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

So basically I need to jump two levels upwards.

The console always logs me undefined

Upvotes: 1

Views: 70

Answers (3)

Ankit Bharti
Ankit Bharti

Reputation: 87

If you want to get id of parent element then you can simply use it. 

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

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

You can do it like this:

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

Demo

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

Upvotes: 3

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can use closest as you did in one of your attempt, you just need to add class selector so that correct li id can be get.

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

Upvotes: 3

Related Questions