jquery - 如果其他 div 为空，则更改 div 类名

Question

嗨希望有人可以帮助解决这个问题：

我基本上想要的是，当 div introtext 为空时，它必须隐藏 div 并将父 div（grid-6）更改为 class=grid-12。我似乎无法完成这项工作！这是我所拥有的（示例代码）：

HTML

<div class=header>
    <img src="[[DTIMAGE]]" alt="inuit.css logo">
</div>
<h1 style="font-size:10px;">[[TITLE]]</h1>
<div class=grids>
    <div class=grid-12>
        [[FULLTEXT]]
    </div><!-- /grid-6 -->
</div><!-- /grids -->
<hr>
<div class=grids>
    <div class=grid-6>
        [[FULLTEXT]]
    </div><!-- /grid-6 -->
    <div class=grid-6>
        <div class="introtext"></div>
    </div><!-- /grid-6 -->
</div><!-- /grids -->
<hr>
<div class=footer>
    [[FOOTER]]
</div>

脚本[使用 jQuery 1.7.2 ]

$(document).ready(function(){
    if ($(".introtext").text() === ""){
        $(".introtext").hide();
    }
});

提前致谢

score 0 · Accepted Answer

如果我理解正确，那么我建议：

$('.introtext').each(
    function() {
        if (!$(this).text()) {
            $(this).hide().parent().toggleClass('grid-6 grid-12');
        }
    });

JS 小提琴演示。

如 OP 的评论中所述，上述代码已重新设计以考虑对要求的更改：

我完全错了（挖掘太多以使其正常工作）事实是，如果 div introtext 为空，则 div grid-6（[[FULLTEXT]] 所在的位置）应更改为 div=grid-12

$('.introtext').each(
    function() {
        if (!$(this).text()) {
            $(this).hide().parent().prev().toggleClass('grid-6 grid-12');
        }
    });

JS 小提琴演示。

复述以上内容：

$('.grid-6').filter(
    function(){
        var introtextEl = $(this).next('.grid-6').find('.introtext');
        return introtextEl.length && !introtextEl.text()
    }).toggleClass('grid-6 grid-12');

JS 小提琴演示。

上面的代码（最新的代码块），有效地查看了选择器返回的所有元素，并根据两个条件过滤它们，首先：如果有一个类的后续元素和一个类grid-6的子元素introtext（jQuery选择器总是返回一个数组，因此.length检查），第二：如果找到.introtext的元素没有文本内容。

如果这些条件都为真，则返回当前评估的元素（以及条件为真的所有元素）以由该toggleClass()方法执行。

参考：

score 0 · Accepted Answer

您可以使用:empty选择器：

if ( $(".introtext").is(':empty') ){
      $(".introtext").hide().parent().attr('class', 'grid-12')
}

如果您有多个元素的类，introtext则可以使用以下each方法：

$('.introtext').each(function(){
    if ( $(this).is(':empty') ){
          $(this).hide().parent().attr('class', 'grid-12')
    }
})

$('.girds div').each(function(){
    if ( $(this).text() == '[[FULLTEXT]]'){
          $(this).attr('class', 'grid-12')
    }
})

jquery - 如果其他 div 为空，则更改 div 类名

2 回答 2

Related

Reference