If else is not workin in Jquery??

Question

Here my Jquery code:

<script>
            $('.smenu li').hover(function() {       
                var lid = $(this).find('li').attr('id'); 
                closeAll(); 
               //show perticular div
                if(lid == "d1")
                    {
                        $('.hbg div#info1').show();
                    }
                else if(lid == "d2")
                    {
                        $('div#info2').show();
                    }
                else if(lid == "d3")
                    {
                        $('div#info3').show();
                    }
            });   

            function closeAll()   
            {   
                $('div#info1').hide();
                $('div#info2').hide();
                $('div#info3').hide();

            } 
          </script>

Here my info div-s:

<div class="hbg">
            <div class="solu_info" id="info1">
              //display information
             </div>
            <div class="solu_info" id="info2">
              //display information
             </div>
.....
</div>  

<div class="smenu">
                <ul>
                  <li id="d1"><a href="#"><img src="images/menu_hosp.jpg" border="0"></a></li>
....

onmouse over the div tags are not getting changed. Why?

Answer 1

if else statement is just javascript, nothing to do with jquery. It always works. If it does not what you expect it to do something in your code logic is wrong.

Answer 2

Maybe it has to be:

var lid = $(this).attr('id');

just alert(lid) and check if it contains a value (most likely not in your code).

---

You current code gets the id of a li element inside the li element.

---

Obviously , if-else will work if your code is right. Remember, it is more likely that you did something wrong as that the language has an error ;)

---

Seriously, you should read some tutorials and the documentation before posting a lot of questions here. Then you would know what find() is doing and which elements $('.smenu li') is selecting.

Update:

Ok, just for you:

This is your HTML

<div class="smenu">
    <ul>
      <li id="d1">...</li>   // #1
      <li id="d2">...</li>   // #1
    </ul>

the selector $('.smenu') will select all the <li>elements that I marked with #1.

Not when you applying .find('li') to such an element, it tries to find a li element inside the li element, i.e. it would select the elements I marked with #2 here:

<div class="smenu">
    <ul>
      <li id="d1">  // #1
          <ul>
            <li id="foo">...</li>  // #2
          </ul>
      <li id="d2">...</li>   // #1
    </ul>

But this is not your structure. You don't have nested lists. You want the IDs from the #1 elements and therefore it has to be

var lid = $(this).attr('id');

Answer 3

Maybe switch is what you need here.

Answer 4

Inside the hover event handler, this is going to be an li, since it is attached to $('.smenu li'). Then $(this).find('li') will find li elements inside .smenu li, which presumably don't exist.