Question

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

它会在侧边栏上创建即将发生的事件，并在每种类型的事件之前添加彩色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

Answer 2

我会调试并查看$(".upcomingEvents div").css("backgroundColor")存储的内容。我怀疑它是"rgb(241, 111, 204)"。

它可能是等效的颜色，但在format: #ffffff

中

使用JQuery基于子div背景颜色隐藏父li

2 个答案: