jquery - 使用 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 的内容。我在 .uiButton 上添加了一个 onclick 事件，并尝试使用父级(“.txt”)或 sibling (“.txt”)，但似乎不起作用...

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

Answer 1

.txt 不是父级，即使如此，它也必须是直接父级( .parent() 匹配直接父级if> 它与选择器匹配)，而您需要:

$(".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(); 
});