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

Question

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.

Please find me code below:

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 :

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/

Let me know if you need any other info.

Please suggest!

Solution 1

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:

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

Solution 2

You can use .contains() selector like

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

Modified Code

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

Demo

Solution 3

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

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

Solution 4

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 not contain the word 'Empty' in their text, against the number of the (previously-cached) elements:

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

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

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

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

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

Solution 5

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.

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/

View more solutions