Как получить позицию нажатия кнопки?

Question

Я хотел бы получить позицию щелкнутого элемента. Если я нажал Первый тег p, окно предупреждения должно дать вывод 1. Если я нажал какой-нибудь текстовый тег p, тогда он должен дать результат 3. Я не знаю, как это сделать. Пожалуйста, дайте мне решение. Заранее спасибо.

Ниже приведен код HTML.

<div class="wrapper"> 
    <p>First</p> 
    <p>Second</p> 
    <p>Some text</p> 
</div> 

Ниже мой JQuery код

<script src="jquery.js"></script> 
<script> 
    $('p').click(function() { 
    alert("You clicked nth position tag"); 
    }); 
</script> 

Answer 1

Вы можете использовать .index():

$('p').on('click', function() { 
 
    //add 1 to get the desired result 
 
    //because index starts from 0 
 
    console.log($(this).index() + 1); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <p>First</p> 
 
    <p>Second</p> 
 
    <p>Some text</p> 
 
</div>

Для вашего нового требования вы можете использовать .text():

$('p').on('click', function() { 
 
    console.log(`You clicked ${$(this).index() + 1} nth position tag with text: ${$(this).text()}`); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <p>First</p> 
 
    <p>Second</p> 
 
    <p>Some text</p> 
 
</div>

Я использовал template literal, но вы можете просто использовать конкатенации.

Answer 2

предупреждение («Вы нажали» + ($ (this) .index() + 1) + «тег позиции»);