jquery - 使用 jQuery 查找前一个元素 - 而不是兄弟

Question

我需要为许多元素附加 onclick 事件。这些点击事件需要对应以下元素。

例如:(jsfiddle here)

HTML:

<span class="s1">s</span>
<span class="s2">s</span>
<div class="divs"></div>
<br/>
<br/>
<span class="s1">s</span>
<span class="s2">s</span>
<div class="divs"></div>
<br/>
<br/>
<span class="s1">s</span>
<span class="s2">s</span>
<div class="divs"></div>

CSS:

.divs{
    background:lightblue;
    width:50px;
    height:50px;
    margin:10px;
}

span{
    background:pink;
    margin:10px;
    padding:10px;
}

JQUERY:

$(function(){
    divs = $('.divs');

    divs.each(function(){
        $this = $(this);

        s1 = $this.closest('span').find('.s1');
        s2 = $this.closest('span').find('.s2');

        s1.click(function(){
            alert('S1 click');
            $this.css('background', 'green');
        });

        s2.click(function(){
            alert('S2 click');
            $this.css('background', 'blue');
        });
    });
});

我想点击任何一个 span 元素并对下面的 div 执行操作。

Answer 1

试试这个:

<div class="wrapper">
<span class="s1">s</span>
<span class="s2">s</span>
<div class="divs"></div>
</div>
<br/>
<br/>
<div class="wrapper">
<span class="s1">s</span>
<span class="s2">s</span>
<div class="divs"></div>
</div>
<br/>
<br/>
<div class="wrapper">
<span class="s1">s</span>
<span class="s2">s</span>
<div class="divs"></div>
</div>

还有 jQuery 部分:

$(function(){

    $('span.s1').on('click',  function () {
        $(this).parent().find('.divs').css('background', 'green');
    });

    $('span.s2').on('click', function () {
        $(this).parent().find('.divs').css('background', 'blue');
    });

});