Question 36317 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Log the nth-child number – Jquery

How do I log the the nth-child number of an element in a container using jQuery. Thanks in advance.

$('.wrapper p').on('click', function() {
  //log the nth-child number of the clicked element
  console.log($(this).nth-child())
})
p {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <p>first</p>
  <p>second</p>
  <p>third</p>
</div>

Example: Say you pressed the <p> tag with content second then the log would be 2 because the <p> tag is found in the second position of the container.

Tags:

3

Answers


  1. 0

    You can use Array.from to convert NodeList to Array of Elements and use indexOf to get index of child

    $('.wrapper p').on('click', function() {
  const allElements = $('.wrapper p');
  const index = Array.from(allElements).indexOf(this) + 1
  console.log(index)
})
    p {
  cursor: pointer;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <p>first</p>
  <p>second</p>
  <p>third</p>
</div>
    Login or Signup to reply.
  2. 0

    You can use JQuery index method too.

    $('.wrapper p').on('click', function() {
   console.log($('.wrapper p').index(this))
})
    Login or Signup to reply.
  3. 0

    This whole thing can be two lines (or one if you want to be creative) inside the event handler. OR leverage the jQuery index function for super simple.

    First, simple example just logs index.

    More complex shows some results.

    Here I added some extra to handle multiple target groups, and show some results with some icky borders for clarity.

    I increased the "index" for these to start from 1; but they really start from 0.

    Simple, no results details:

    $('.wrapper').on('click', 'p', function(event) {
  const index = $(this).index() + 1;
  console.log(index);
});
    .wrapper {
  cursor: pointer;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <p>first</p>
  <p>second</p>
  <p>third</p>
</div>

    Expanded for more details

    $('.wrapper').on('click', 'p', function(event) {
  /* two lines
    const targetGroupElements = $(event.delegateTarget).find('p');
    const index = targetGroupElements.index(this) + 1;
  */
  /* one line */
  //const index = $(event.delegateTarget).find('p').index(this) + 1;
  // leverage jQuery .index()
  const index = $(this).index() +1;
  // just to show results:
  const rt = $('<div/>');
  const r = $('#results').html("Last clicked:");
  r.append(rt.clone().html("Index:" + index));
  r.append(rt.clone().html("Text:" + $(this).text()));
  r.append(rt.clone().html("Group Index:" + $(event.delegateTarget).index()));
  r.append(rt.clone().html("GroupName:" + $(event.delegateTarget).data("group")));
});
    .wrapper {
  cursor: pointer;
  border: solid pink 1px;
}

#results {
  border: solid blue 1px;
}

#results div {
  border: solid cyan 1px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper" data-group="first">
  <p>first</p>
  <p>second</p>
  <p>third</p>
</div>
<div class="wrapper" data-group="twos">
  <p>first-2</p>
  <p>second - 2</p>
  <p>third - 2</p>
</div>
<div class="wrapper" data-group="three">
  <p>first off</p>
  <p>second off</p>
  <p>thirdly</p>
</div>
<div id="results"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search