2

HTMLへの変更を許可しないcmsを使用しています。

サイドバーに今後のイベントを作成し、各タイプのイベントの前に色付きのdivを追加してそれらを分類します。JQueryを使用して、特定のページのカテゴリの1つだけを表示したいと思います。

それらが生成するコードは次のとおりです。

<ul class="upcomingEvents">
    <li>
        <a href="#">
    <div style="display:inline;width:3px;height:1em;background-color:#f8546f;">&nbsp;</div>&nbsp;First</a>
        <br>
        <i>&nbsp;&nbsp;Sunday</i>
    </li>
    <li>
        <a href="#"><div style="display:inline;width:3px;height:1em;background-color: #000;">&nbsp;</div>&nbsp;Second</a>
        <br>
        <i>&nbsp;&nbsp;Friday</i>
    </li>
    <li>
        <a href="#"><div style="display:inline;width:3px;height:1em;background-color: #F16FCC;">&nbsp;</div>&nbsp;Third</a>
        <br>
        <i>&nbsp;&nbsp;Wednesday</i>
    </li>
    <li>
        <a href="#"><div style="display:inline;width:3px;height:1em;background-color: #F16FCC;">&nbsp;</div>&nbsp;Fourth</a>
        <br>
        <i>&nbsp;&nbsp;Monday</i>
    </li>
</ul>

このコードの「3番目」と「4番目」のイベントのみを表示したいのですが、クラスまたはIDが提供されていません。私の考えは、それらのliの子divの背景色によってそのカテゴリを識別することでした。ページの読み込み時にすべてのliを非表示にします。次に、目的のliのみを表示するようにjqueryに指示します。

結果のコードは次のようになります。

<ul class="upcomingEvents">
    <li style="display: none; ">
        <a href="#"><div style="display:inline;width:3px;height:1em;background-color:#f8546f;">&nbsp;</div>&nbsp;First</a>
        <br>
        <i>&nbsp;&nbsp;Sunday</i>
    </li>
    <li style="display: none; ">
        <a href="#"><div style="display:inline;width:3px;height:1em;background-color: #000;">&nbsp;</div>&nbsp;Second</a>
        <br>
        <i>&nbsp;&nbsp;Friday</i>
    </li>
    <li>
        <a href="#"><div style="display:inline;width:3px;height:1em;background-color: #F16FCC;">&nbsp;</div>&nbsp;Third</a>
        <br>
        <i>&nbsp;&nbsp;Wednesday</i>
    </li>
    <li>
        <a href="#"><div style="display:inline;width:3px;height:1em;background-color: #F16FCC;">&nbsp;</div>&nbsp;Fourth</a>
        <br>
        <i>&nbsp;&nbsp;Monday</i>
    </li>
</ul>

このコードを使用してみましたが、成功しませんでした。

$(document).ready(function() {
    $(".upcomingEvents li").hide();
    if ($(".upcomingEvents div").css("backgroundColor") == "rgb(241, 111, 204)") $(this).show();
});​

私は何が間違っているのですか？

</ p>

4

2 に答える 2

0

eq()次の方法を試すことができます。

$(document).ready(function() {
    var $li = $(".upcomingEvents li")
    $li.hide();
    $li.eq(2).show() // the third 'li' element
    $li.eq(3).show() 
});​

each現在のソリューションでは、次の方法を使用できます。

$(document).ready(function() {
    $(".upcomingEvents li").hide();
    $(".upcomingEvents li div").each(function(){
        if ( $(this).css("background-color") == "rgb(241, 111, 204)" ) {
           $(this).closest('li').show()
        }
    })
});

フィドル

于 2012-08-17T19:36:21.660 に答える
-1

デバッグして、何$(".upcomingEvents div").css("backgroundColor")が保存されているかを確認します。私はそれがそうなるとは思えません"rgb(241, 111, 204)"。

おそらく同等の色ですが、これではformat: #ffffff

于 2012-08-17T19:32:38.113 に答える