javascript - 查找与jquery中悬停的元素具有相同父母的所有孩子

Question

我有一个主题列表。在每个主题中，我都有项目。当我悬停一个项目时，我会尝试更改该主题的每个项目的颜色。

<div class="subject">
    <div class="item">hello</div>
    <div class="item">hello2</div>
    <div class="item">hello3</div>
</div>

<div class="subject">
    <div class="item">hello</div>
    <div class="item">hello2</div>
    <div class="item">hello3</div>
</div>

如果我这样做，它会更改整个页面的所有 .items ：

$(".item").hover(function () {
    $(".item").addClass("hovering");
}, function () {
    $(".item").removeClass("hovering");
});

我找不到怎么说“所有与我悬停的项目具有相同父母的孩子”......谢谢！

Answer 1

将您的 JS 更改为：

$(".item").hover(function () {
    $(this).addClass("hovering");
}, function () {
    $(".item").removeClass("hovering");
});

这是 JSFiddle：http: //jsfiddle.net/hZ9zb/

Answer 2

我创建了一个 jsfiddle 请通过这个。

$(document).ready(function()
                  {
  $(".item").hover(function () {

    $(this).addClass("hovering");
   }, function () {
    $(this).removeClass("hovering");
  });
});

http://jsfiddle.net/S8qep/49/

谢谢

Answer 3

利用：

$(".item").hover(function () {
    $(this).parent().find('.item').addClass("hovering");
}, function () {
    $(this).parent().find('.item').removeClass("hovering");
});

jsFiddle 示例

Answer 4

$(".item").hover(function () {
   $(this).siblings().addClass("hovering");
 }, function () {
   $(this).siblings().removeClass("hovering");
});

小提琴