1

例如，我有简单的 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 的边框。它们具有相同的父a类 div，但难点在于 class 的元素不止一个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()函数之前运行良好；我究竟做错了什么？我应该如何选择我需要的元素？

4

3 回答 3

2

我建议：

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

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

JS 小提琴演示。

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

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

JS 小提琴演示。

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

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

JS 小提琴演示。

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

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

JS 小提琴演示。

参考：

于 2012-10-21T08:07:47.487 回答
0

试试这个小提琴

$(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");
}
于 2012-10-21T01:53:13.127 回答
0

尝试类似的东西

jQuery('.a').children().first().click(function(){
jQuery('.childINeedToSelect').attr('background-color','red');
)}
于 2012-10-21T07:55:47.260 回答