jQuery父子选择

Question

I am new to jQuery and am trying to write a script that will run through a menu list and display the correct background image based on the menu item. The menu list is going to be randomly populated so a script is necessary to load the correct image.

The problem is that the attribute where I am able to see which item the menu belongs to is not on the list item itself but on a div contained inside the list item. My question is is it possible to select a child element of the already selected element ?

Eg (the menuli a segment)

$(document).ready( function() {

    $(menuli).each( function(index) {

      $itemnumber = $(menuli a).attr("href");

      switch($itemnumber) {

        case 1:
          $(this).css("background-image", "image01.jpg");
          break;
      }
    });
});

This is more or less the script I am trying to get, where each list item is iterated through and depending on the href of the link inside the list item a background image is set to that list item.

EDIT

Here is my html:

<div id="divMenuSportGSXSports">
    <div class="VociMenuSportG">                                
        <div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&amp;IDSport=468&amp;Antepost=0&amp;)">
            <img src="buttons_void.png">
        </div>              
        <div class="NomeSport">
            <a id="h_w_PC_cSport_repSport_ctl00_lnkSport" href="/Sport/Groups.aspx?IDSport=468&amp;Antepost=0">
                <span title="SOCCER">SOCCER</span>
            </a>
        </div>          
    </div>              
    <div class="VociMenuSportG">                                
        <div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&amp;IDSport=520&amp;Antepost=0&amp;)">
            <img src="buttons_void.png">
        </div>              
        <div class="NomeSport">
            <a id="h_w_PC_cSport_repSport_ctl01_lnkSport" href="/Sport/Groups.aspx?IDSport=520&amp;Antepost=0">
                <span title="BASEBALL">BASEBALL</span>
            </a>
        </div>          
    </div>              
    <div class="VociMenuSportG">                                
        <div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&amp;IDSport=544&amp;Antepost=0&amp;)">
            <img src="buttons_void.png">
        </div>              
        <div class="NomeSport">
            <a id="h_w_PC_cSport_repSport_ctl02_lnkSport" href="/Sport/Groups.aspx?IDSport=544&amp;Antepost=0">
                <span title="CRICKET">CRICKET</span>
            </a>
        </div>          
    </div>              
    <div class="VociMenuSportG">                                
        <div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&amp;IDSport=525&amp;Antepost=0&amp;Tema=Supabets)">
            <img src="buttons_void.png">
        </div>              
        <div class="NomeSport">
            <a id="h_w_PC_cSport_repSport_ctl03_lnkSport" href="/Sport/Groups.aspx?IDSport=525&amp;Antepost=0">
                <span title="BASKETBALL">BASKETBALL</span>
            </a>
        </div>          
    </div>              
    <div class="VociMenuSportG">                                
        <div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&amp;IDSport=534&amp;Antepost=0&amp;)">
            <img src="buttons_void.png">
        </div>              
        <div class="NomeSport">
            <a id="h_w_PC_cSport_repSport_ctl04_lnkSport" href="/Sport/Groups.aspx?IDSport=534&amp;Antepost=0">
                <span title="ICE HOCKEY">ICE HOCKEY</span>
            </a>
        </div>          
    </div>              
    <div class="VociMenuSportG">                                
        <div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&amp;IDSport=523&amp;Antepost=0&amp;)">
            <img src="buttons_void.png">
        </div>              
        <div class="NomeSport">
            <a id="h_w_PC_cSport_repSport_ctl05_lnkSport" href="/Sport/Groups.aspx?IDSport=523&amp;Antepost=0">
                <span title="TENNIS">TENNIS</span>
            </a>
        </div>          
    </div>  
</div>

Answer 1

Yes you can, use find

 var parentElement = $('#someElement');
 var childElement =  parentElement.find('.child'); //where .child should be your child selector

Where as example code is not clear, I just gave answer to your question.

Answer 2

try to change this:

$(this).css("background-image", "image01.jpg");

to this:

$(this).children("div").css("background-image", "image01.jpg");

If you want to target the direct child of the element, better to use children() than find()

Please refer to this: What is fastest children() or find() in jQuery?