javascript - 为什么这个父元素也选择其他元素？

Question

我有4盒div标签，每盒里面有不同的div。通过 jQuery，我想让点击的 div 的第二个子元素突出显示或更改其颜色。此外，每个父 div 都有一个隐藏的 div，点击父 div 后，子 div 显示。我做了一些类似于我想要的东西，但是在点击一个 div 之后，它也会对其他父 div 进行操作。查看演示以了解我的意思。

http://jsfiddle.net/e3TeY/

这是我的 JS 代码

$(document).ready(function(){
    $(".close").hide();
    $("div").click(function(){
        var classname = $(this).parent();
        alert(classname);
        $(classname).children(':first-child').next().css("color","white");
        $(classname).find(".close").show();
    });
});

HTML:

<div class="item1">
    <div class="name1">name 1</div>
    <div class="name2">name 2</div>
    <div class="name3">name 3</div>
    <div class="close">close</div>
</div>
<div class="item2">
    <div class="name4">name 1</div>
    <div class="name5">name 2</div>
    <div class="name6">name 3</div>
    <div class="close">close</div>
</div>
<div class="item3">
    <div class="name7">name 1</div>
    <div class="name8">name 2</div>
    <div class="name9">name 3</div>
    <div class="close">close</div>
</div>
<div class="item4">
    <div class="name10">name 1</div>
    <div class="name11">name 2</div>
    <div class="name12">name 3</div>
    <div class="close">close</div>
</div>

那么你有什么想法让它只对选定的父 div 进行操作(改变它的第二个子 div 的颜色并显示它隐藏的 div 子)？

Answer 1

这是一个干净的解决方案。最好为父 div item

定义一个通用的类名

<div class="item item1">
    <div class="name1">name 1</div>
    <div class="name2">name 2</div>
    <div class="name3">name 3</div>
    <div class="close">close</div>
</div>

$(document).ready(function(){
    $(".close").hide();
    $("div.item > div").click(function(){
        $(this).parent().find("div:nth-child(2)").css("color","white");
        $(this).parent().find(".close").show();
    });
});

http://jsfiddle.net/ergec/2PjbP/