2

我正在使用不允许更改 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();
});​

我究竟做错了什么？

​</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 回答