JQuery Parent-Child Selection

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 ?

E.g (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>

to find a child you can use the find method. selectedElement.find('css-selector'). — Hank Lapidez, Jul 21 '14 at 06:11
The html doesn't match the script. Can you edit your post so that the code is consistent? You mention List Items but the html has only divs. And item numbers are not present in the html — Anurag, Jul 21 '14 at 06:21

score 0 · Accepted Answer · answered Jul 21 '14 at 06:10

0

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.

answered Jul 21 '14 at 06:10

Ravi Hamsa

4,721
3
14
14

yes, I think it should work. but `find(a)` should be `find('a')` – Ravi Hamsa Jul 21 '14 at 06:37

score 0 · Answer 2 · edited May 23 '17 at 11:57

0

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?

edited May 23 '17 at 11:57

Community

1
1

answered Jul 21 '14 at 06:10

qtgye

3,580
2
15
30

Gave it a read, seeing as my a link is inside a div inside of the of the div acting as the list item (which is the selected element) I would have to use find() rather than children() as the a link is not a direct descendant – Michael Jul 21 '14 at 06:25

JQuery Parent-Child Selection

2 Answers2