jQuery children() 更深入答案

【问题标题】：jQuery children() going deeperjQuery children() 更深入
【发布时间】：2012-09-28 08:18:36
【问题描述】：

<div class='main'>

<div>
        <div>
            <button></button>
        </div>
</div>
<ul>    
        <li>
            <img />
        </li>

        <li>
            <h1></h1>
        </li>

</ul>
<div>
        <span>
            <a href=""></a>
        </span>
</div>

</div>

问题：我想选择按钮，img、h1 和 a。在 jQuery 中执行此操作的唯一方法（据我所知）是 $(.main).children().children().children()。但是还有另一种方法可以在 jQuery 中选择这些元素吗？（不要多次使用 children()）

【问题讨论】：

$(".main").find("button, img, h1, a") 将选择".main" 下任何级别的所有这些元素 - 但您的意思是您想要它们从任何级别，还是恰好三个级别以下？
$("img, h1, a, button", ".main")
@nnnnnn's 更简单。对于图像 - $('li img').each(function(o){....})。对于h1 - $('li h1').each(function(o){....})。对于锚点 - $('span a').each(function(o){....}).
Yuriy Rozhovetskiy 分享最佳答案:) 不知道 $ 可以选择这样的元素。

标签： jquery children

【解决方案1】：

jQuery 选择器的工作方式类似于 CSS 选择器：

var $button = $('.main > div > div > button');

你也可以使用find()方法：

var $a = $('.main').find('a');

http://api.jquery.com/category/selectors/

【讨论】：

【解决方案2】：

你可以使用 .find() 方法：

$('.main').find()

【讨论】：

【解决方案3】：

实际上，如果您尝试选择“容器 div”内的所有叶节点，您可以尝试

$(".main :not(:has(*))")

这将选择“容器 div”内任何级别的任何元素，并且没有子元素。

【讨论】：

【解决方案4】：

<div class="main">
   <div>
      <div>
         <button class="mustSelect"></button>
      </div>
   </div>
   <ul>
      <li>
         <img class="mustSelect" />
      </li>
      <li>
         <h1 class="mustSelect"></h1>
      </li>
   </ul>
   <div>
      <span>
      <a href="" class="mustSelect"></a>
      </span>
   </div>

将 class(class="mustSelect") 添加到您需要的元素中。然后在js中你可以引用这些元素如下。

$('.mustSelect')

如果您无法添加课程，请使用以下

$("button, img , h1 , a ", ".main")

它告诉 jquery 选择 .main 类中的按钮 img 、 h1 、 a 。

希望这对您有所帮助。如果您有任何问题，请随时提问。谢谢

【讨论】：