如何通过单击 jQuery 中同一父级的另一个子 div 来选择一个子 div？答案

【问题标题】：How to select one child div by clicking on another child div of the same parent in jQuery?如何通过单击 jQuery 中同一父级的另一个子 div 来选择一个子 div？
【发布时间】：2012-10-21 19:52:37
【问题描述】：

例如我有简单的 html。

<body>
    <div class="a">
        <div class="child"></div> <!-- div element I click -->
        <div class="childINeedToSelect"></div> <!-- div element I need to be selected -->
        <div class="child"></div>
    </div>
    <div class="a">
        <div class="child"></div>
        <div class="childINeedToSelect"></div>
        <div class="child"></div>
    </div>
</body>

当我点击顶部第一个child class div 时，我需要更改，例如，第一个childINeedToSelect class div 的边框ONLY。它们具有相同的父级 - a 类 div，但困难在于具有类 a 的元素不止一个。我已经试过了：

$(document).ready(function () {
    var child = $('.child');
    child.bind('click', function() {
        detectElement($(this));
    });
});

var belt;
function detectElement(arrow) {
    belt = arrow.parent('.a').children('childINeedToSelect').eq(1);
    belt.css("background-color", "red");
}

如您所见，我正在尝试将 $(this) 作为参数发送到 detectElement() 以确定单击了哪个 div。但是我的目标div 背景没有改变，当我稍后尝试使用元素belt 时，在detectElement() 函数检测到 之后，Opera javascript 调试器给了我错误

Unhandled Error: Cannot convert 'belt.css('marginLeft')' to object

排队

var currentMargin = parseInt(belt.css('marginLeft').toString().replace('px', ''));

但是在调用detectElement() 函数之前，这行代码运行良好；我究竟做错了什么？我应该如何选择我需要的元素？

【问题讨论】：

belt = arrow.parent('.a').children('childINeedToSelect').eq(1);不是一个有效的选择器，那里只有一个对象，所以它是 .eq(0)，但你甚至不需要具有这种选择器模式的 EQ....
children('childINeedToSelect') 也缺少点前缀来表示类

标签： javascript jquery selector

【解决方案1】：

我建议：

function detectElement(arrow) {
    arrow.parent().find('.childINeedToSelect').css('background-color','red');
}

$(document).ready(function(){
    $('.child').click(function(){
        detectElement($(this));
    });
});

JS Fiddle demo.

或者您可以使用nextAll() 方法找到兄弟childINeedToSelect：

function detectElement(arrow) {
    arrow.nextAll('.childINeedToSelect').css('background-color','red');
}

JS Fiddle demo.

如果你应该有多个.child 和childINeedToSelect 元素，你可以将:first 选择器传递给nextAll() 方法：

function detectElement(arrow) {
    arrow.nextAll('.childINeedToSelect:first').css('background-color','red');
}

JS Fiddle demo.

我不确定您为什么使用bind()，但您可能可能试图考虑动态添加的元素（添加之后事件处理程序绑定到各种 DOM 节点/jQuery 对象），您可以改用 on():

$('.a').on('click','.child', function(){
    detectElement($(this));
});

JS Fiddle demo.

参考资料：

【讨论】：

不客气，我很高兴能帮上忙！ =)

【解决方案2】：

Try this fiddle

$(document).ready(function () {
    var child = $('.child');
    child.bind('click', function() {
        detectElement($(this));
    });
});

var belt;
function detectElement(arrow) {
    belt = arrow.siblings('.childINeedToSelect').eq(0);
    belt.css("background-color", "red");
}

【讨论】：

【解决方案3】：

试试类似的东西

jQuery('.a').children().first().click(function(){
jQuery('.childINeedToSelect').attr('background-color','red');
)}

【讨论】：