如何 select 特殊标签在另一个带有 jquery 的特殊标签之后

Question

我有一个 html 页面，在 <span class="class1"> 之后有一些 <input> 标签，我想 select 所有这些输入标签 disabled

我如何使用 jQuery select 或者？

我正在测试 $('span.class1+ :disabled') ，但这行不通！

我的html是这样的：

<span class="class1"></span>
<input type="text" disabled/>
<span class="class1"></span>
<input type="text"/>
<input type="text" disabled/>

我想select所有输入都像第一个输入（注意：不像第三个输入）

Answer 1

使用下面的代码。在 span.class1

之后获取禁用元素

详细了解 :disabled 选择器

您需要检查 .nextAll()

Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.

$(document).ready(function(){

  $('span.class1').nextAll('input:disabled');

});

工作演示

$(document).ready(function(){
  $('span.class1').nextAll('input:disabled').val('disabled text box')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="class1"> span  </span>
<input type="text" class="" disabled />
<span class="class1"></span>
<input type="text" disabled/>
<span class="class1"></span>
<input type="text"/>
<input type="text" disabled/>

As TrueBlueAussie mention in comment i have add new option to solve issue

$(document).ready(function(){
  $('span.class1').nextUntil('span','input:disabled').val('disabled text box')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<span class="class1"> span class1 </span>
<input type="text" class="" disabled /><br/>
<span class="class1"> span class1 </span>
<input type="text" disabled/><br/>
<span class="class1"> span class1 </span>
<input type="text"/><br/>
<input type="text" disabled/><br/>
<span class="class2"> span class2 </span>
<input type="text"/><br/>
<input type="text" disabled/>

Answer 2

尝试利用 Next Siblings Selector (“prev ~ siblings”)

Description: Selects all sibling elements that follow after the "prev" element, have the same parent, and match the filtering "siblings" selector.

var disabled = $("span.class1 ~ input:disabled");

disabled.css("border", "2px solid brown");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="class1"></span>
<input type="text" disabled />
<span class="class1"></span>
<input type="text"/>
<input type="text" disabled />

Answer 3

其他答案对何时停止搜索没有限制。他们在每个 class1 跨度之后处理 所有兄弟姐妹 （不管他们之间的任何 span，应该充当 "fences"）。

根据您的布局，您可能希望它在到达下一个跨度后停止，因此使用 nextUntil 来限制搜索并使用过滤器来仅定位所需的元素：

$(document).ready(function(){
  $('span.class1').nextUntil('span').filter('input:disabled').val('disabled text box')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="class1"> span class1 </span>
<input type="text" class="" disabled /><br/>
<span class="class1"> span class1 </span>
<input type="text" disabled/><br/>
<span class="class1"> span class1 </span>
<input type="text"/><br/>
<input type="text" disabled/><br/>
<span class="class2"> span class2 </span>
<input type="text"/><br/>
<input type="text" disabled/>

你会注意到这个没有设置最后输入的文本（因为它没有遵循 class1 跨度。

正如 @Nishit Maheta 所指出的（在将我的回答附加到他的之后），您可以将其缩短为：

$('span.class1').nextUntil('span', 'input:disabled').val('disabled text box')

如何 select 特殊标签在另一个带有 jquery 的特殊标签之后

how to select special tag after another special tag with jquery

html

jquery

jquery-selectors