Question

我有一个带有<input>标记的html页面<span class="class1">我希望选择所有这些输入标记disabled

如何使用jQuery选择器执行此操作？

我测试$('span.class1+ :disabled')，但这不起作用！

我的HTML是这样的：

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

我想选择所有输入，例如第一个输入（注意：不像第三个输入）

Answer 1

其他答案对何时停止搜索没有限制。他们在每个class1跨度之后处理所有兄弟姐妹（无论它们之间是否有span，它们应该作为＆＃34; fences＆＃34;）。

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

＆＃13;

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

＆＃13;

<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/>

＆＃13;

你会注意到这一个没有设置最后一个输入的文本（因为它不跟随class1范围。

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

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

Answer 2

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

之后获取禁用元素

详细了解:disabled选择器

您需要查看.nextAll()

获取匹配组中每个元素的所有兄弟姐妹元素，可选择由选择器过滤。

$(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/>

正如TrueBlueAussie在评论中提到的，我添加了新的选项来解决问题

$(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 3

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

说明：选择＆＃34; prev＆＃34;之后的所有兄弟元素。 element，拥有相同的父级，并匹配过滤＆＃34;兄弟姐妹＆＃34; 选择器。

＆＃13;

var disabled = $("span.class1 ~ input:disabled");

disabled.css("border", "2px solid brown");

＆＃13;

<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 />

＆＃13;

如何使用jquery选择另一个特殊标签之后的特殊标签

3 个答案: