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

Question

我会尽力完成任务，请确认翻译内容无误后再使用。

在运行时，我生成了一些方框，如果所有方框都包含文本“Empty”，则用户不应该能够继续进行。但是，如果即使有一个方框包含正确的值（而不是“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 &amp; 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");
    }
});

但是什么都没用！

我还创建了一个fiddle供参考或尝试！

请参考fiddle：http://jsfiddle.net/aasthatuteja/xJtAV/

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

请提供建议！

- UID

---

问题实际上是你使用了jQuery语法，但没有包含库本身。 - Tanel Eero

Answer 1

如果你想在至少一个框中包含除 "Empty" 之外的内容时执行某些操作，就不需要使用 each 函数。只需执行以下操作：

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

- andi

Answer 2

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

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

修改后的代码

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

Demo

- Satpal

Answer 3

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

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

- Seth McClaine

---

谢谢。运行得很好。 - Pegues

Answer 4

我建议如下：

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

- David Thomas

Answer 5

.html() 属性返回 HTML 标签之间的值，我使用了 find() 来查找每次迭代中要检查的正确元素。这对我很有效。

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

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

- scrowler