Log the nth-child number-CodePudding

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

CodePudding user response：

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 >
  <p>first</p>
  <p>second</p>
  <p>third</p>
</div>

CodePudding user response：

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 >
  <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  data-group="first">
  <p>first</p>
  <p>second</p>
  <p>third</p>
</div>
<div  data-group="twos">
  <p>first-2</p>
  <p>second - 2</p>
  <p>third - 2</p>
</div>
<div  data-group="three">
  <p>first off</p>
  <p>second off</p>
  <p>thirdly</p>
</div>
<div id="results"></div>

CodePudding user response：

Just access the event of the current element.

$('.wrapper p').on('click', function(e) {
  console.log(e.currentTarget)
})

CodePudding user response：

You can use JQuery index method too.

$('.wrapper p').on('click', function() {
   console.log($('.wrapper p').index(this))
})