Получить содержимое элементов родного брата с помощью jQuery

Question

Мне нужно получить содержимое некоторых конкретных элементов с помощью jquery, проблема в том, что у меня на странице повторяется один и тот же элемент:

<div class="content">
   <img alt="" src="">
   <p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
   <p class="info">Lorem ipsum dolor...</p>
   <ul>
     <li><a class="uiButton">Test</a></li>
   </ul>
 </div>

Итак, повторение div.content на моей странице многораз, и я хочу получить только содержимое div, который удерживает кнопку нажатой.Я добавил событие onclick в .uiButton и попытался использовать parent (". Txt") или братьев и сестер (". Txt"), но, похоже, не работает ...

$(".uiButton").click(function(){ 
  var txt = $(this).parent(".txt").text(); 
}

Answer 1

.txt не является родителем, и даже тогда он должен быть прямым родителем (.parent() соответствует непосредственному родителю , если этосоответствует селектору), вместо этого вам нужно:

$(".uiButton").click(function(){ 
  var txt = $(this).closest("ul").siblings(".txt").text(); 
});

Альтернатива - пройти до .content (через .closest()), чтобы быть в безопасности, затем пройти вниз с помощью.find():

$(".uiButton").click(function(){ 
  var txt = $(this).closest(".content").find(".txt").text(); 
});

Answer 2

Вам нужно подняться до обертки и вниз, вы можете пойти к братьям и сестрам, но в этом случае это будет сложнее.

$(".uiButton").click(function(){ 
  var txt = $(this).closest('.content').find('.txt').text(); 
}

Answer 3

$(this).closest('p.txt');

Может работать.