jQuery父子选择答案

【问题标题】：JQuery Parent-Child SelectionjQuery父子选择
【发布时间】：2014-07-21 19:07:12
【问题描述】：

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

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

例如（menuli a 段）

$(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>

【问题讨论】：

相关的html在哪里？
你能给我们看看小提琴吗？
要找到一个孩子，你可以使用 find 方法。 selectedElement.find('css-selector').
我想用$(menuli a)代替$(menuli).find('a')
html 与脚本不匹配。您可以编辑您的帖子以使代码保持一致吗？您提到列表项，但 html 只有 div。并且 html 中不存在项目编号

标签： javascript jquery html css

【解决方案1】：

是的，你可以，使用find

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

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

【讨论】：

是的，我认为它应该可以工作。但find(a) 应该是find('a')

【解决方案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?

【讨论】：

读一读，看到我的链接位于 div 内部的 div 内，充当列表项（这是所选元素），我将不得不使用 find() 而不是children() 作为链接不是直接后代