html - 定位这个孩子的特定父母兄弟姐妹

Question

发现了这个问题，这让我能够独自完成。但是，在我的情况下，我得到了具有相同类的多个元素，并且它当前选择了所有元素，我可以以某种方式将它指向唯一悬停的元素吗？

$(function(){
    $('.hover').live('mouseover', function(){
       $(this).parent().siblings('.target').css('color','red');
    }); 
    $('.hover').live('mouseout', function(){
       $(this).parent().siblings('.target').css('color','black');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div class="target">target</div>
<div>
    <a class="hover">Hover</a>
</div>

<div class="target">target</div>
<div>
    <a class="hover">Hover</a>
</div>

<div class="target">target</div>
<div>
    <a class="hover">Hover</a>
</div>

标签： htmljquery

Answer 1

使用.prev而不是.siblings只获取前一个元素：

$('.hover').hover(
  function() {
    $(this).parent().prev().css('color', 'red');
  },
  function() {
    $(this).parent().prev().css('color', 'black');
  }
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="target">target</div>
<div>
  <a class="hover">Hover</a>
</div>

<div class="target">target</div>
<div>
  <a class="hover">Hover</a>
</div>

<div class="target">target</div>
<div>
  <a class="hover">Hover</a>
</div>

（如果您想要下一个元素，请使用.next()）