Question

例如我有简单的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类div时，我需要更改第一个childINeedToSelect类div的border 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()函数之前，这行代码完美无缺;我究竟做错了什么？我应该如何选择我需要的元素？

Answer 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

参考文献：

Answer 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");
}

Answer 3

尝试类似

的内容

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

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

3 个答案: