Question

鉴于下面显示的HTML结构，我希望如果您点击p中的ul，那div.selected旁边的ul将会有.css("background", "yellow")对此进行了表演。

<ul>
    <li>
        <p>Hello</p>
        <p>Hello</p>
    </li>
</ul>

<div>Hello Again</div>
<div class="selected">Hello Again</div>
<div><span>And Again</span></div>

<ul>
    <li>
        <p>Hello</p>
        <p>Hello</p>
    </li>
</ul>


<div>Hello Again</div>
<div class="selected">Hello Again</div>
<div><span>And Again</span></div>

到目前为止我已经有了;

$("p").next("div .selected").css("background", "yellow");

Answer 1

$("p").next("div .selected").addClass("selected");

Answer 2

你需要：

$('ul').on('click', 'p', function () {
    $(this).closest('ul').nextAll('div.selected:first').css('background', 'yellow');
});

on()是在jQuery 1.7中引入的，所以如果您使用的是旧版本，请尝试;

$('ul p').bind('click', function () {
    $(this).closest('ul').nextAll('div.selected:first').css('background', 'yellow');
});

要为点击添加事件处理程序，您需要使用event method。另请参阅on()，closest()的文档（以选择与选择器匹配的第一个祖先），nextAll()（选择与选择器匹配的下一个兄弟;与{{3相对应）只考虑选择的下一个元素。）

Answer 3

最好添加css类来从js中分离css，如下所示：

$('div.selected').addClass('className');

Answer 4

为什么不添加以下css

.selected{
       bacground-color:yellow;
}

或者你可以试试这个

$("p").parents('ul').siblings("div.selected").css("background-color", "Red")

如何针对单击元素定位元素？

4 个答案: