Question

我是jQuery的新手，我正在尝试编写一个脚本，该脚本将运行菜单列表并根据菜单项显示正确的背景图像。菜单列表将随机填充，因此需要脚本来加载正确的图像。

问题是，我能够看到菜单属于哪个项目的属性不在列表项本身上，而是在列表项内包含的div上。我的问题是是否可以选择已选择元素的子元素？

E.g（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;
      }
    });
});

这或多或少是我想要获取的脚本，其中每个列表项都是迭代的，并且根据列表项中链接的href，背景图像被设置为该列表项。

编辑

这是我的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

是的，您可以使用find

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

如果示例代码不清楚，我只是回答了你的问题。

Answer 2

尝试改变这个：

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

到此：

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

如果您想定位元素的直接子元素，最好使用children()而不是find()

请参阅：What is fastest children() or find() in jQuery?

JQuery父子选择

2 个答案: