If element has class and another element is empty change class on another element

Question

I have this html structure, this is a snippet there is lots more in the same structure.

<button id="showEmpty">Press</button>
<div class="children">
    <div class="package">
        <span class="name"></span>
        <span class="value"></span>
    </div>

    <div class="package array">
        <span class="name"></span>
        <span class="value"></span>
    </div>

    <div class="package">
        <span class="name"></span>
        <span class="value"></span>
    </div>

    <div class="package array">
        <div class="children">
            <div class="package array">
                <span class="name"></span>
                <span class="value"></span>
            </div>

            <div class="package">
                <span class="name"></span>
                <span class="value"></span>
            </div>

            <div class="package array">
                <div class="children">
                    <div class="package array">
                        <span class="name"></span>
                        <span class="value"></span>
                    </div>

                    <div class="package array">
                        <span class="name"></span>
                        <span class="value"></span>
                    </div>

                    <div class="package">
                        <span class="name"></span>
                        <span class="value"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I want to find all of the div elements with the class 'array' and then the span elements with the class 'value' within those div that dont have any content.

Those that apply I want to change the class of another span element within the div with the class 'name' to say 'empty'.

I have this code so far, but I'm not sure where to go next.

(function(){
    $('#showEmpty').click(function() {
        if ($('div.package').each().hasClass('array') && $('span.value').each().text().trim().length()) {
            $('span.value').removeClass('name').addClass('empty');
        else alert('no arrays found');
        }
    });
});

EDIT: I would also need to only do this where the array div's don't have children div's

Answer 1

One easy way is(assuming the empty span will be <span></span> , ie there is no blank content in it)

jQuery(function ($) {
    $('#showEmpty').click(function () {        
        $('div.package.array').has('span.value:empty').find('span.name').removeClass('name').addClass('empty');
    });
});

Here we finds div with classes package and array which has an empty span with class value , then find the span with class name in those div and remove and add class

---

If the span.value can have blank values then you can use a filter

jQuery(function ($) {
    $('#showEmpty').click(function () {
        $('div.package.array').filter(function () {
            return $('span.value', this).text().trim().length() > 0;
        }).find('span.name').removeClass('name').addClass('empty');
    });
});

Answer 2

You can use this function:

$('.array').each(function(){
    if ($(this).children('span.value').text() === "")
    {
        $(this).children('span.name').addClass('empty').removeClass('name');
    }
});

Fiddle here

Answer 3

$('div.package.array > span.value').each(function () {
        $('span.name').removeClass('name').addClass('empty');
    });

Answer 4

This is how I would do it:

$('#showEmpty').click(function () {
    $(".array > span.value:empty").siblings(".name").removeClass('name').addClass('empty');
});

Here is the JSFiddle demo

You can inspect-element to see the changes on button click.

Answer 5

You can use a code like this:

$(document).ready(function(){
    $('#showEmpty').click(function() {
        $('div.package span.value').each(function(){
            if ($(this).val().length==0) {
              $(this).parent().find('span.name').removeClass('name').addClass('empty');
            }
        });
    });
});

Fiddle here: http://jsfiddle.net/n2o55xve/

Hope it helps.