Как получить значение элемента по клику

Question

Я пытаюсь получить текст (1, 2, 3 ...) элементов li при каждом щелчке по тегу привязки 'show' с помощью jQuery, но не могу заставить его работать.

Вот с чем я работаю:

HTML:

<ul>
<li class="item_id">1</li>
<a class="show" href="#">SHOW</a>
</ul>

<ul>
<li class="item_id">2</li>
<a class="show" href="#">SHOW</a>
</ul>

<ul>
<li class="item_id">3</li>
<a class="show" href="#">SHOW</a>
</ul>

Javascript:

/**This shows all values on each click and not only the current one**/
$("a.show").click(function(){

  $('li.item_id').each(function() {
      var item_id = $(this).text();
          alert(testimonial_id);                    
        });

});

/**This shows the first value on each click and not only the current one**/
$("a.show").click(function(){

    var item_id = $("li.item_id").text();
    alert(item_id);

});

Заранее спасибо !

Answer 1

Вы можете использовать $(this).closest('ul').find('li.item_id')

1. , щелкнув целевой родительский элемент, используя функцию closest.
2. Затем find li.item_id. наконец вернуть текст

$("a.show").click(function() {
  let item_id = $(this).closest('ul').find('li.item_id').text();
  console.log(item_id)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="item_id">1</li>
  <a class="show" href="#">SHOW</a>
</ul>

<ul>
  <li class="item_id">2</li>
  <a class="show" href="#">SHOW</a>
</ul>

<ul>
  <li class="item_id">3</li>
  <a class="show" href="#">SHOW</a>
</ul>
Javascript:

Answer 2

Вы можете получить доступ к брату через .siblings(selector); затем используйте .text() для извлечения его свойства innerText.

$("a.show").click(function() {
  const itemId = $(this).siblings('li.item_id').text();
  console.log(itemId)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="item_id">1</li>
  <a class="show" href="#">SHOW</a>
</ul>

<ul>
  <li class="item_id">2</li>
  <a class="show" href="#">SHOW</a>
</ul>

<ul>
  <li class="item_id">3</li>
  <a class="show" href="#">SHOW</a>
</ul>

Answer 3

Попробуйте с prev().

Метод .prev () ищет предшественника каждого из этих элементов в дереве DOM.

$("a.show").click(function() {
  let item_id = $(this).prev('li.item_id').text();
  console.log(item_id)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="item_id">1</li>
  <a class="show" href="#">SHOW</a>
</ul>

<ul>
  <li class="item_id">2</li>
  <a class="show" href="#">SHOW</a>
</ul>

<ul>
  <li class="item_id">3</li>
  <a class="show" href="#">SHOW</a>
</ul>
Javascript: