using jquery on two separate sections of data

I have a page which generates two lists out of SQL. I'll use example information and setup:

The first list is all records from Memphis, so it pulls Name, Cartype, Year, and Color.

Jeremy, Saturn, 2001, Black

Sue, Buick, 1996, Green

John, Dodge, 2006, Red

The second list is all r开发者_JAVA百科ecords not from Memphis. Again with the same fields.

Bobby, Mercury, 1999, Blue

Mike, Mustang, 1974, White

Robby, Prius, 2009, Silver

I want to let a user match one set from each separate list. For example, I want to click on Sue (in the first list), and Bobby (in the second list). For each of those clicks, I want it to hide the rest of /that/ list, and to capture an identifier value.

So if you clicked on Sue, the other rows in that list would vanish, and jquery would capture a value for Sue.

code:

<li class2=\"$IDnumber\" class=\"items\">$name, $type, $year, $color</li></br>

$('li').click(function() {
           $(this).siblings(".items").hide(); 

           var charID = $(this).attr('class2');
            alert(page);

        });

The above code works - sortof. It hides the corresponding items in the list with class of "item", and it captures my IDnumber value. But I cannot figure out how to do the same (but separate) with the second list. What's the trick here?

Add an extra class to the first list elements and a different one to the second list elements(actually not necesarry to add class to 2nd). When a element get's clicked identify the class and hide the elements with that class.

maybe this is what you wanted to do: http://jsfiddle.net/geko/YtBNz/5/ this is with 2 distinct classes.

http://jsfiddle.net/geko/YtBNz/7/ this is with just an extra class.

And even an easier solution: http://jsfiddle.net/geko/YtBNz/12/ just hide the list based on .parent().hide()

It sounds like you're not separating your lists properly. Does your HTML look like this:

<!-- first list (this is just a comment) -->
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

<!-- second list (this is just a comment) -->
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>