Question

我在点击某个项目时尝试更改嵌套span元素的类。 JSFiddle goes here

HTML：

<div id="title_1" class="title">Title 1</div>
<span id="foo_1" class="foo">
    foo contents<br />
    <span class="bar">bar contents</span>
    <br /><br />
</span>

<div id="title_2" class="title">Title 2</div>
<span id="foo_2" class="foo">
    foo contents<br />
    <span class="bar">bar contents</span>
    <br /><br />
</span>

虽然像我在当前的JSFiddle中所做的那样$(this).nextAll('.foo:first').addClass('highlight');，但可以更改第一个范围的类。

但是我想改变＆＃39; bar＆＃39;仅元素。

在我尝试过的一些事情中：

$(this).nextAll('.foo:first .bar:first').addClass('highlight');
$(this).nextAll('.foo .bar:first').addClass('highlight');
$(this).nextAll('.foo:first').nextAll('.bar:first').addClass('highlight');
$(this).next('.foo').next('.bar').addClass('highlight');

......一切都没有成功。

我想我在这里遗漏了一些基本的东西。有人可以帮助我吗？

Answer 1

在这里：https://jsfiddle.net/nez0cvsm/

只需使用nextAll()更改next()（访问标题后的范围），然后添加.children()（以访问范围内的范围）。我使用的是儿童，而不是＆＃34;发现＆＃34;假设在那个范围内只会有另一个。

Answer 2

如果您计划有多个范围并且只想选择具有条形类的范围，则可以使用以下内容：

$(this).next().children('.bar').addClass('highlight');

这里的例子（有额外的跨度）：https://jsfiddle.net/1ekrjqk1/

Answer 3

您也可以使用next，然后找到类bar

的元素

$(this).next('.foo').find('.bar').addClass('highlight');

演示： https://jsfiddle.net/yssusqq9/

访问jQuery中的嵌套span元素

3 个答案: