Javascript 若元素有类，而另一个元素为空，则更改另一个元素上的类

我有这个html结构，这是一个片段，在同一个结构中还有很多

<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>

编辑：我也只需要在数组div没有子div的情况下执行此操作，一个简单的方法是（假设空的

span

将是

，即其中没有空白内容）

在这里，我们找到带有class

package

的

div

和带有class

值的
span
为空的
array
，然后在这些div中找到带有class
name
的
span
，并删除和添加class


如果
span.value
可以有空值，则可以使用过滤器

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

我会这样做：

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


您可以在单击按钮时检查元素以查看更改。
您可以使用此功能：

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

您可以使用如下代码：

$(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');
            }
        });
    });
});

在这里拉小提琴：

希望能有所帮助。
谢谢，效果很好！是否可以检查第一个div是否不包含在同一个div中具有类“children”的divstatement@Pedroson因此，如果有children类，那么你不必运行这个，我需要运行那个，以及检查children类。在检查跨度之前，应先检查子类。感谢$（'div.package.array'）[检查此处是否没有子类].has（'span.value:empty'）。。。。。。我需要检查数组div中是否没有包含类children的元素抱歉，更清楚地说，我只想执行该函数，其中数组div不包含类children的div。
$('#showEmpty').click(function () {
    $(".array > span.value:empty").siblings(".name").removeClass('name').addClass('empty');
});

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

$(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');
            }
        });
    });
});