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>

我想找到所有带有'array'类的div元素，然后在那些没有任何内容的div中找到带有'value'类的span元素。

那些适用的我想改变div中另一个span元素的类，并使用'name'类来表示'empty'。

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

(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这些div中的类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'); }); });可以包含空值，则可以使用过滤器

    {
"_id" : ObjectId("55b09029e56e5ecc1577f00e"),
"user" : ObjectId("559a298d9969172f3ffeaa6d"),

"name" : "ddd", 
"language" : "english",


"pages" :

[ {

"_id" : ObjectId("55b0902be56e5ecc1577f00f"),


"page_image" : [

{ "image" : "images.png", "_id" : ObjectId("55b09032e56e5ecc1577f010") }, 
{ "image" : "20140624_172041_fbhciha_sm.jpeg", "_id" : ObjectId("55b0903ce56e5ecc1577f011") }, 
{ "image" : "673.jpg", "_id" : ObjectId("55b09042e56e5ecc1577f012") } ] } ], "__v" : 4 }

Answer 2

您可以使用此功能：

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

Fiddle here

Answer 3

Jo Bloggs, Widget Maker, England

Answer 4

我就是这样做的：

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

Here is the JSFiddle demo

您可以通过inspect-element查看按钮单击时的更改。

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/

希望它有所帮助。

如果element有类而另一个元素为空，则更改另一个元素上的类

5 个答案: