jquery - 使用JQuery根据子div背景颜色隐藏父li

Question

我使用的 cms 不允许更改 html。

它在侧边栏上创建即将发生的事件，并在每种类型的事件之前添加一个彩色 div 来对它们进行分类。我想使用 JQuery 仅在某些页面上显示其中一个类别。

这是他们生成的代码:

<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>

我只想显示此代码中的“第三”和“第四”事件，但没有提供类或 ID。我的想法是通过这些 li 中子 div 的背景颜色来识别该类别。隐藏页面加载时的所有 li。然后告诉 jquery 仅显示所需的 li。

我希望生成的代码如下所示:

<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();
});​

我做错了什么？

​

Answer 1

您可以尝试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()
        }
    })
});

<强> Fiddle