1

我试图让一个 div 显示另一个是否为空。这需要在整个页面中多次发生。该脚本在当前状态下无法运行。

脚本：

$('.standard_page_list_result').each(function(){

if ($('.children p').length == 0)
    $('.summary').css("display", "block");

});

HTML：

<div class="standard_page_list_result"><div class="children"><p>Hello</p></div>
<div class="summary"><p>Goodbye</p></div></div>

<div class="standard_page_list_result"><div class="children"><p>Hello</p></div>
<div class="summary"><p>Goodbye</p></div></div>

<div class="standard_page_list_result"><div class="children"><p>Hello</p></div>
<div class="summary"><p>Goodbye</p></div></div>

<div class="standard_page_list_result"><div class="children"><p></p></div>
<div class="summary"><p>Hello!</p></div></div>

CSS：

.summary { display: none; }
4

5 回答 5

3

在一行中：

$('.standard_page_list_result .children p:empty').parent().next('.summary').css('display','block');

演示：http: //jsfiddle.net/JXDNk/

于 2012-05-02T03:33:18.843 回答
2

使用相同的概念，您需要确定与您相关的人this，然后执行查找选择器以使其正常工作。你正在做的是得到所有的长度。

$('.standard_page_list_result').each(function(){
    if ($(this).find('.children p').text().length == 0)
        $(this).find('.summary').css("display", "block");
});

这是给你的 jsFiddle

http://jsfiddle.net/JoshuaPack/4C35E/

于 2012-05-02T03:28:52.513 回答
1

而不是使用is()函数检查<div>尝试的长度。

$('.standard_page_list_result').each(function(){
   if($(this).find('.children p').is(':empty')) {
      $(this).find('.summary').css("display", "block");
   }
});

编辑：

修复了上面的代码以选择每个元素，而不是在只有 1 为空时影响所有元素。已经选择了其他答案，但对于未来的观众来说，这是使用 is() 函数的替代方法。这是一个小提琴。

注意：空也检查没有空格。如果只有一个空格，那么它不是空的

于 2012-05-02T03:22:11.327 回答
1

只需根据元素的空虚切换摘要：

$('.standard_page_list_result').each(function(){
  $('.summary', this).toggle( $('.children p', this).is(":empty") );
});​
于 2012-05-02T03:32:16.727 回答
0

$('...').length将告诉您有多少元素与您的选择器匹配，而不是这些元素是否为空。

要检查元素是否为空，我可能会这样做：

if($.trim($(...).text()).length == 0)

最后，您需要this在每个内部使用以定位适当的元素。像这样的东西：

$('.standard_page_list_result').each(function(){
    var $this = $(this);

    if ($.trim($this.find('.children p').text()).length == 0){
        $this.find('.summary').css("display", "block");
    }
});

http://jsfiddle.net/kzfGL/1/

于 2012-05-02T03:22:00.093 回答