Question

在下面的html中我点击id = 2然后id = 2，如何使用兄弟在jQuery中访问span标签Harr kane值？

<div class="parentId">
   <span class="span1">
      <i class="i1">p</i>
      <span>Harr Kane</span>
   </span>
   <a class="a1" href="">
    <i id="2" class="i1">i1</i>
   </a>
</div>

Answer 1

$(this).parent().prev().find('span:first').text();

►$(this) - 选择当前点击的元素。

►.parent() - 将为当前所选元素的父级提供。

►.prev() - 将选择上一个元素。

►.find() - 用于查找选择内的元素。

►:first - 是一个伪选择器，用于选择第一个匹配的选择。

►.text() - 提取选区内的文字

工作演示

＆＃13;

$(document).ready(function(){
    $("#2").click(function(e){
        e.preventDefault()
        alert($(this).parent().prev().find('span:first').text());
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentId">
   <span class="span1">
      <i class="i1">p</i>
      <span>Harr Kane</span>
   </span>
   <a class="a1" href="">
    <i id="2" class="i1">i1</i>
   </a>
 </div>

＆＃13;

Answer 2

$('#2').click(function() {

  console.log($(this).closest('div.parentId').find('.span1').find('span').text()) 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="parentId">
  <span class="span1">
      <i class="i1">p</i>
      <span>Harr Kane</span>
  </span>
  <a class="a1" href="">
    <i id="2" class="i1">i1</i>
  </a>
</div>

使用.closest()获取div。使用.find()定位正确的元素

访问子项值jquery

2 个答案: