如果元素具有类并且另一个元素为空，则在另一个元素上更改类答案

【问题标题】：If element has class and another element is empty change class on another element如果元素具有类并且另一个元素为空，则在另一个元素上更改类
【发布时间】：2015-07-23 10:43:51
【问题描述】：

我有这个 html 结构，这是一个 sn-p 在同一结构中还有更多。

<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 中查找所有具有类“array”的 div 元素，然后查找具有类“value”的 span 元素。

那些适用的我想将 div 中另一个 span 元素的类更改为类“名称”以说“空”。

到目前为止，我有这段代码，但我不确定下一步该去哪里。

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

编辑：我还需要只在数组 div 没有子 div 的情况下执行此操作

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

一种简单的方法是（假设空的span 将是<span></span>，即其中没有空白内容）

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

在这里我们找到 div 类 package 和 array 有一个空的 span 类 value，然后在这些 div 中找到 span 类 name 并删除并添加类

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

【讨论】：

谢谢，效果很好！是否可以检查第一个 div 是否在同一语句中不包含具有“children”类的 div
@Pedroson 所以如果有子类那么你就不必运行这个
我需要运行它，并检查儿童课程。应在检查跨度之前检查子类。谢谢
$('div.package.array') [检查这里是否没有子类] .has('span.value:empty')......我需要检查数组 div 中没有包含类子元素的元素
抱歉，更清楚地说，我只想执行该功能，其中数组 div 不包含具有“children”类的 div。

【解决方案2】：

你可以使用这个功能：

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

Fiddle here

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

我会这样做：

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

Here is the JSFiddle demo

您可以检查元素以查看按钮单击时的更改。

【讨论】：

【解决方案5】：

你可以使用这样的代码：

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

在这里提琴：http://jsfiddle.net/n2o55xve/

希望对你有帮助。

【讨论】：