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 をクリックすると、たとえば、ファーストクラスの div の境界のみchildINeedToSelectを変更する必要があります。それらは同じ親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");
}

ご覧のとおり、どのdivがクリックされたかを判断するために$(this)、パラメーターとして送信しようとしています。detectElement()しかし、ターゲットのdiv背景は変わらず、後で要素を使用しようとすると、関数によって検出されたbelt後、Opera JavaScript デバッガーでエラーが発生しますdetectElement()

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 フィドルのデモ。

を使用していた理由はわかりませんが、動的に追加された要素 (イベントハンドラーがさまざまな DOM ノード/jQuery オブジェクトにバインドされた後に追加された要素) を説明しようとしている可能性がある場合は、代わりに使用できbind()ます:on()

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

JS フィドルのデモ。

参考文献:

于 2012-10-21T08:07:47.487 に答える
0

次のようなものを試してください

jQuery('.a').children().first().click(function(){
jQuery('.childINeedToSelect').attr('background-color','red');
)}
于 2012-10-21T07:55:47.260 に答える
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 に答える