jQueryの条件は、各

Question

のために私はこのjQueryの機能を持っています。私はこの関数をそれぞれに渡したいと思います。divのテキストの長さが160未満の場合は、スタイルをdisplay：noneに設定して、toggle_moreクラスを非表示にします。それ以外の場合は何も起こりたくありません。

これはサンプルのdiv（数があるうち）である：

<div class="descript_short" dir=""> 
test 
<a class="toggle_more" href="#">show more</a> 
</div> 
<div class="descript_long" dir="" style="display:none"> 
test 
<a class="toggle_less" href="#">show less</a> 
</div> 

だから、私の問題はそれだけで何もしていないということです。私はそれが構文エラーだと思っています。しかし、たぶん私は関数を間違って書いてしまっていて、実際に何をしたいのかを表現していません。これをチェックしている目の別のセットは非常に高く評価されるでしょう。

Answer 1

.next()呼び出しが壊れています。これは子ノードではなく、兄弟をテストするためのものです。

試してみてください。

$(document).ready(function() { 
    $("div.descript_long").each(function() { 
     var descript_length = $(this).text().length; 

     if(descript_length < 160) { 
      $(this).find("a.toggle_more").first().hide(); 
     } else { 
      $(this).find("a.toggle_more").first().show(); 
     } 
    }); 
}); 

私はOPのマークアップを読み違えていたようEDITはもともと.nextAll()の代わりfindを持っていました。

Answer 2

あなたのコードは実際に次のa要素を探していないと思います。なぜなら、a要素は見つかったdiv内にあるからです。そのために.find()を使用できます。次に、.hide()と.show()を直接使用するか、定義したCSSクラスを追加したり削除したりするのではなく、display:noneを要素に設定する必要があります。

$(document).ready(function() { 
    $("div.descript_long").each(function() { 
     var descript_length = $("div.descript_long").text().length; 

     if(descript_length < 160) 
     $(this).find("a.toggle_more").hide(); 
    else 
     $(this).find("a.toggle_more").show(); 

    }); 
}); 

Answer 3

"this"をテキストに使用して検索してみてください。

$(document).ready(function() {  
    $("div.descript_long").each(function() {   
     var descript_length = $(this).text().length; 
     if(descript_length < 160)   
      $(this).next().find("a.toggle_more").attr('style','display:none');  
     else   
      $(this).next().find("a.toggle_more").removeAttr("style");  
    }); 
}); 

EDITED TO TO FIND。

Answer 4

はご提案いただきありがとうございますが、私はそれが仕事を得ることができていない。この

$(document).ready(function() { 
    $("div.descript_long").each(function() { 
     $(this).nextAll("a.toggle_more").css({display: ($(this).text().length < 160)?"none":"block"}); 
    }); 
});