tags:

views:

35

answers:

1

I have two a tags and I want to create two separate click functions because they behave different.

<div class="select-big">
    <div class="select-holder">
        <div class="button">
            <a href="#" class="trigger right"></a>
            <div class="cl">&nbsp;</div>
        </div>
        <div class="dropdown">
            <ul>
                <li><a href="#" class="icon-s icon-s2">Restaurant</a></li>
                <li><a class="icon-s icon-s1" href="#">Grocery</a></li>
                <li><a href="#" class="icon-s icon-s2">Pizza Delivery</a></li>
            </ul>
            <div class="cl">&nbsp;</div>
        </div>
    </div>

    <div class="select-holder select-holder2">
        <div class="button">
            <div id="one1" class="left number_changer"></div>
            <p id="count_of_stations" class="text left">Number Of Stations</p>
            <a href="#" class="trigger right"></a>
            <div class="cl">&nbsp;</div>
        </div>
        <div class="dropdown">​

currently i have this that selects both

$('.select-big ul li a').click(function () {
+4  A: 

Give them unique IDs

<li><a id="someID" href="#" class="icon-s icon-s2">Restaurant</a></li>  
<li><a id="someOtherID" class="icon-s icon-s1" href="#">Grocery</a></li>
<li><a id="someDifferentID" href="#" class="icon-s icon-s2">Pizza Delivery</a></li>

jQuery

$('#someID').click(function() {
    //  do something
});

$('#someotherID').click(function() {
    //  do something else
});

or select them by index:

$('.select-big ul li a:eq(0)').click(function() {
    //  do something
});

$('.select-big ul li a:eq(1)').click(function() {
    //  do something else
});

or traverse from one to the next (if they are adjascent).

$('.select-big ul li a:eq(0)').click(function() {
    //  do something
})
  .next().click(function() {
    //  do something else
});
patrick dw