jQuery：检查所有 <DIV> 或 <Span> 是否包含特定文本

jQuery: Check if all <DIV> or <Span> contains a specific text

提问by UID

I generate few boxes at runtime, where I want to confirm if all the boxes contains text "Empty", then the user should not be able to proceed. But if even a single Box contains the correct value of box (instead of Empty), then user should be able to proceed.

我在运行时生成了几个框，我想确认所有框是否都包含文本“Empty”，然后用户应该无法继续。但是，即使单个 Box 包含正确的 box 值（而不是 Empty），那么用户应该能够继续。

Please find me code below:

请在下面找到我的代码：

HTML

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 &amp; Proceed" class="marginLeft10" />
</div>

This is my HTML structure... by searching some of the existing posts, I tried creating some IF logic using jQuery :

这是我的 HTML 结构...通过搜索一些现有的帖子，我尝试使用 jQuery 创建一些 IF 逻辑：

I tried this option:

我试过这个选项：

$(document).ready(function () {
    $('.bin-area').each(function () {
        if ($(this).text() == 'Empty') {
            alert("Empty");
        }
    });
});

And this option:

这个选项：

$(document).ready(function () {
    if ($("span.floatLeft").contains("Empty")) {
        alert("Empty");
    }
});

But nothing worked!

但没有任何效果！

I have also created a fiddle to refer or try!

我还创建了一个小提琴来参考或尝试！

Please refer the fiddle: http://jsfiddle.net/aasthatuteja/xJtAV/

请参考小提琴：http: //jsfiddle.net/aasthatuteja/xJtAV/

Let me know if you need any other info.

如果您需要任何其他信息，请告诉我。

Please suggest!

请建议！

回答by andi

If you want to do something if at least one box contains something other than "Empty", you don't need an each function. Just do this:

如果您想在至少一个盒子包含除“Empty”以外的其他内容时做某事，则不需要 each 函数。只需这样做：

if ($('.bin-area').length === $('.bin-area:contains("Empty")').length) {
    alert("Do nothing");
}
else {
    alert("Do something");
}

回答by Satpal

You can use .contains()selector like

您可以使用.contains()选择器，例如

 $('.bin-area:contains("Empty")')

Modified Code

修改代码

$('.bin-area:contains("Empty")').each(function () {
    alert("Empty");
});

Demo

演示

回答by David says reinstate Monica

I'd suggest:

我建议：

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".');
}

Caching the elements:

缓存元素：

var els = $('.bin-area');

Comparing the number of elements that do notcontain the word 'Empty'in their text, against the number of the (previously-cached) elements:

将文本中不包含该词的元素'Empty'数量与（以前缓存的）元素数量进行比较：

els.filter(function(){
    return $(this).text().indexOf('Empty') === -1;
}).length == els.length) {

If they are the same lengths, then no .bin-areaelements contain the word 'Empty', therefore do something to show that:

如果它们的长度相同，则没有.bin-area元素包含单词'Empty'，因此做一些事情来表明：

console.log('none of the divs contain "Empty".');

Otherwise, at least one of those elements musthave contained the word 'Empty'somewhere, therefore handle that:

否则，这些元素中至少有一个必须在'Empty'某处包含该词，因此请处理：

else {
    console.log('At least one of the divs contains "Empty".');
}

回答by Seth McClaine

In your jsfiddle example use the .find('span')before .text()

在您的 jsfiddle 示例中使用.find('span')之前.text()

if ($(this).find('span').text() === 'Empty') {

回答by Robbie Averill

The .html()attribute returns values from in between HTML tags, and I've used find()to go in and find the correct element you want to check in each iteration.

该.html()属性返回 HTML 标记之间的值，我过去常常find()在每次迭代中查找要检查的正确元素。

This works for me:

这对我有用：

$(document).ready(function () {
    $('.bin-area').each(function () {
        if ($(this).find('span.floatLeft').html() == 'Empty') {
            alert("Empty");
        }
    });
});

http://jsfiddle.net/xJtAV/8/

http://jsfiddle.net/xJtAV/8/