jQuery:检查是否所有<DIV>或<Span>都包含特定的文本
jQuery: Check if all <DIV> or <Span> contains a specific text
>我在运行时生成几个框,我想确认是否所有框都包含文本"空",那么用户应该无法继续。但是,即使单个 Box 包含正确的 box 值(而不是 Empty),则用户应该能够继续。
请在下面找到我的代码:
.HTML
<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>
这是我的HTML结构...通过搜索一些现有的帖子,我尝试使用jQuery创建一些IF逻辑:
我尝试了此选项:
$(document).ready(function () {
$('.bin-area').each(function () {
if ($(this).text() == 'Empty') {
alert("Empty");
}
});
});
而这个选项:
$(document).ready(function () {
if ($("span.floatLeft").contains("Empty")) {
alert("Empty");
}
});
但没有任何效果!
我还创建了一个小提琴来参考或尝试!
请参考小提琴:http://jsfiddle.net/aasthatuteja/xJtAV/
如果您需要任何其他信息,请告诉我。
请指教!
如果要在至少一个框包含"Empty"以外的内容时执行某些操作,则不需要 each 函数。 只需这样做:
if ($('.bin-area').length === $('.bin-area:contains("Empty")').length) {
alert("Do nothing");
}
else {
alert("Do something");
}
你可以使用 .contains() 选择器,比如
$('.bin-area:contains("Empty")')
修改后的代码
$('.bin-area:contains("Empty")').each(function () {
alert("Empty");
});
演示
在你的 jsfiddle 示例中,在 .text()
之前使用.find('span')
if ($(this).find('span').text() === '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');
将文本中不包含单词 'Empty'
的元素数与(以前缓存的)元素数进行比较:
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".');
}
.html()
属性从 HTML 标记之间返回值,我使用find()
进入并找到要在每次迭代中检查的正确元素。
这对我有用:
$(document).ready(function () {
$('.bin-area').each(function () {
if ($(this).find('span.floatLeft').html() == 'Empty') {
alert("Empty");
}
});
});
http://jsfiddle.net/xJtAV/8/
相关文章:
- 使用Clipboard.js复制span文本
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 货币代码为欧元-金额的格式不应包含小数
- 使用 中包含的 span 标记的内容对 href 标记的列表进行排序
- 使用 JavaScript split 来包含单词,标点符号与 span 但忽略 HTML
- 如何 chk 如果 span 标签是否包含文本
- 检查 span 元素是否包含“文本”,并且是父元素的最后一个子元素
- 如何使用jQuery更改span内部的文本,使其他span包含的节点保持不变
- JavaScript:如何用包含唯一id的span标记将字符串中的每个单词包装起来
- 如果span-id包含包含特定文本的php数据
- 在包含相对".js"后缀的npm包中使用aurelia-cli需要导入(特别是autobahn)
- 如何将php文件中的值包含到jQuery中,并将其放入span元素中
- 如何在包含在iframe中的网页中创建span元素
- 查找包含特定文本的span并使用Jquery替换它
- 从P元素内部获取文本,而不在所选内容中包含span标记
- 如何检测所选文本是否包含在span标记中
- 如果元素包含这些单词中的任何一个,则将该单词包装在 span 中
- 如何使用正则表达式匹配不包含特定子字符串的字符串?
- Javascript:在span中获取纯文本,其中包含其他嵌套标签
- span在模式-推特引导2