1

I'm trying to get one div to show if another is empty. This needs to happen multiple times throughout a page. The script won't work in its present state.

Script:

$('.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（）関数を使用する代わりの方法です。これがそのフィドルです。

注：空の場合、空白がないかどうかもチェックされます。スペースが1つしかない場合は、空ではありません

于 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 に答える