Javascript jQuery:检查是否全部<;部门>;或<;Span>;包含特定的文本
我在运行时生成几个框,我想确认是否所有框都包含文本“Empty”,那么用户应该无法继续。但是,即使单个框包含正确的Box值(而不是空),用户也应该能够继续 请在下面找到我的代码: HTMLJavascript jQuery:检查是否全部<;部门>;或<;Span>;包含特定的文本,javascript,jquery,html,css,if-statement,Javascript,Jquery,Html,Css,If Statement,我在运行时生成几个框,我想确认是否所有框都包含文本“Empty”,那么用户应该无法继续。但是,即使单个框包含正确的Box值(而不是空),用户也应该能够继续 请在下面找到我的代码: HTML <div> <div class="bin-area empty floatLeft" style="width:242px; height:130px; "> <label for="9"> <div class="b
<div>
<div class="bin-area empty floatLeft" style="width:242px; height:130px; ">
<label for="9">
<div class="bin" data-binid="0" data-cols="0" data-rows="0">
<div class="number">S9</div>
<input class="floatLeft styled" id="9" name="checkbox9" type="checkbox" />
<label for="9"><span class="floatLeft marginLeft40">Empty</span>
</label>
<div class="type"></div>
<div class="description">Storage</div>
</div>
</label>
</div>
<div class="bin-area empty floatLeft" style="width:242px; height:130px; ">
<label for="9">
<div class="bin" data-binid="0" data-cols="0" data-rows="0">
<div class="number">S9</div>
<input class="floatLeft styled" id="9" name="checkbox9" type="checkbox" />
<label for="9"><span class="floatLeft marginLeft40">Empty</span>
</label>
<div class="type"></div>
<div class="description">Storage</div>
</div>
</label>
</div>
<div class="bin-area" style=" width:242px; height:130px; ">
<label for="8">
<div class="bin" data-binid="5" data-cols="9" data-rows="5">
<div class="number">S8</div>
<input class="floatLeft styled" id="8" name="checkbox8" type="checkbox" />
<div class="type">9x5 Storage Bin</div>
<div class="description">Est. Capacity: 121 pkgs</div>
</div>
</label>
</div>
</div>
<div style="clear:both"></div>
<div role="button" style="margin-top:20px">
<input type="button" id="stepAutomap" value="Automap" class="active" />
<input type="button" id="stepAutomapBack" value="Back" class="active marginLeft50" />
<input type="button" id="stepAutomapConfirm" value="Confirm & Proceed" class="marginLeft10" />
</div>
而这一选择:
$(document).ready(function () {
$('.bin-area').each(function () {
if ($(this).text() == 'Empty') {
alert("Empty");
}
});
});
$(document).ready(function () {
if ($("span.floatLeft").contains("Empty")) {
alert("Empty");
}
});
但是什么都没用
我还创建了一个提琴来参考或尝试
请参阅小提琴:
如果您需要任何其他信息,请告诉我
请建议 您可以像这样使用选择器
$('.bin-area:contains("Empty")')
修改代码
$('.bin-area:contains("Empty")').each(function () {
alert("Empty");
});
属性.html()
返回html标记之间的值,我使用find()
进入并找到要在每次迭代中检查的正确元素
这对我很有用:
$(document).ready(function () {
$('.bin-area').each(function () {
if ($(this).find('span.floatLeft').html() == 'Empty') {
alert("Empty");
}
});
});
我建议:
var els = $('.bin-area');
if (els.filter(function(){
return $(this).text().indexOf('Empty') === -1;
}).length == els.length) {
console.log('none of the divs contain "Empty".');
}
else {
console.log('At least one of the divs contains "Empty".');
}
缓存元素:
var els = $('.bin-area');
els.filter(function(){
return $(this).text().indexOf('Empty') === -1;
}).length == els.length) {
将文本中不包含单词“Empty”
的元素数与(以前缓存的)元素数进行比较:
var els = $('.bin-area');
els.filter(function(){
return $(this).text().indexOf('Empty') === -1;
}).length == els.length) {
如果它们的长度相同,则没有.bin area
元素包含单词'Empty'
,因此请采取措施显示:
console.log('none of the divs contain "Empty".');
否则,这些元素中至少有一个必须包含单词“Empty”
,因此请处理:
else {
console.log('At least one of the divs contains "Empty".');
}
在JSFIDLE示例中,在
.text()之前使用.find('span')
如果您想在至少一个框中包含“空”以外的内容时执行某些操作,则不需要为每个函数指定一个值。只要这样做:
if ($('.bin-area').length === $('.bin-area:contains("Empty")').length) {
alert("Do nothing");
}
else {
alert("Do something");
}
这个问题实际上是从使用jQuery语法开始的,但没有包括库本身。谢谢。工作得很好。