Question

I am using a cms that does not allow changes to the html.

It creates upcoming events on a sidebar and adds a colored div before each type of event to categorize them. I want to use JQuery to only show one of the categories on certain pages.

Here is the code they generate:

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

I want to only show ‘third’ and ‘fourth’ event from this code, but I’m not provided with classes or ids. My thought was to identify that category by the background-color of the child div in those li’s. Hide all li’s on page load. Then tell jquery to only show the desired li’s.

I would want to resulting code to look as follows:

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

I tried using this code but with no success.

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

What am I doing wrong?

​

Answer 1

You can try the eq() method:

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

With your current solution, you can use the each method:

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