如果元素具有類，而另一個元素為空，則更改另一個元素上的類

Question

我有這個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元素。

適用的那些我想用“名稱”類將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的情況下執行此操作

Answer 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 ，然后找到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');
    });
});

Answer 2

您可以使用此功能：

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

在這里擺弄

Answer 3

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

Answer 4

這就是我要做的：

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

這是JSFiddle演示

您可以檢查元素以查看單擊按鈕時的更改。

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

希望能幫助到你。