Question

我有这样的代码：

<span class="no1">
<button class="num1"><span class="abc"></span></button>
<button class="num2"><span class="abc"></span></button>
</span>
<span class="no2">
<button class="num1"><span class="abc"></span></button>
<button class="num2"><span class="abc"></span></button>
</span>

现在，我想使用类abc，类num1内，类跨度no2内的跨度更改颜色

我尝试了$(".no2").children('.num1').css('color', 'orange')

Answer 1

根据您的问题，您要更改span class="abc"内具有span和class="num1"的{{1}}元素的颜色

span class="no2"

在jQuery中，$（选择器nextSelector）表示$（“祖先子孙”）

某个元素的后代可以是该元素的子代，孙代，曾孙代，等等。

Answer 2

如果您决定抛弃jQuery，只需背负Sushil的答案querySelector即可模仿这种行为。

const b = document.querySelector('.no2 .num1 .abc');
b.classList.add('blue');

.blue { color: blue };

<span class="no1">
<button class="num1"><span class="abc">test1</span></button>
<button class="num2"><span class="abc">test2</span></button>
</span>
<span class="no2">
<button class="num1"><span class="abc">test3</span></button>
<button class="num2"><span class="abc">test4</span></button>
</span>

Answer 3

您可以这样使用jQuery选择元素：

 $(.no1 .num1).first().css( "background-color", "red" );

请找到这个小提琴：https://jsfiddle.net/jega1syb/#&togetherjs=bVGaanQ61z

如何更改另一个跨度内按钮的跨度颜色

3 个答案: