Question

I have a drop down menu that returns results after a selection. The user can then click a link, cloning the dropdown menu, and choose another selection that will return more results. The structure of the results div is as follows:

<ul>
  <li class="red">
    <span> some html content</span>
  </li>
  <li class="red">
    <span> some html content</span>
  </li>
</ul>

I would like the user to click an li and change the background color. The user should only be able to change the color of one li at a time. I am able to accomplish this first part using:

$("li.red, li.blue").live("click",function() {
      var $this, c;
      $this = $(this);
      c = $this.hasClass("red")
                ? {us: "blue", them: "red" }
                : {us: "red", them: "blue" };
       $("li." + c.us).removeClass(c.us).addClass(c.them);
       $this.removeClass(c.them).addClass(c.us);
    });

The problem is that when the user adds another selection (and the previous dropdown is cloned using jquery), and clicks an li in that results div, the previous selection is unselected. I want the user to be able to change the background of the li for the first set of results, as well as change the background for the second set of results. So each set of results would be able to toggle background colors between only that particular ul.

Any help is much appreciated!

Answer 1

Try this…

$("ul").on("click", "li", function() {
    $(this).parent().find("li").removeClass("red").addClass("blue");
    $(this).toggleClass("red").toggleClass("blue");
});

jsFiddle example… http://jsfiddle.net/L34pT/3/

Giving the ul a class name or ID would make sure it only affects the list in question. It looks a little pointless, but I used parent and find so that you only have to change the ul selector if you do give it a class or ID, and it will still work.