jquery 对使用 .find 找到的每个元素执行操作答案

【问题标题】：jquery perform action with every element found with .findjquery 对使用 .find 找到的每个元素执行操作
【发布时间】：2015-12-21 20:44:22
【问题描述】：

我有以下 HTML。（这是系统解析的）如何对每个“查找”元素执行操作。我喜欢对每个找到的锚点执行一个动作

HTML

<ul>
  <li class="category">
    <h2>title</h2>
    <ul>
      <li class="section">
        <h3>section title</h3>
        <ul class="article-list>
          <li><a href="#">link</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="category">
    <h2>title</h2>
    <ul>
      <li class="section">
        <h3>section title</h3>
        <ul class="article-list>
          <li><a href="#">link</a></li>
        </ul>
      </li>
      <li class="section">
        <h3>section title</h3>
        <ul class="article-list>
          <li><a href="#">link</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

JavaScript/jQuery

$("ul li.category h2").each(function() {
    $category = $(this);    
    //do something with category;

    $($category).each(function() {
        console.log("category: " + $(this).text());

      $(this).find("ul.article-list li a").each(function() {
        //do something 
      });
    });
});

【问题讨论】：

有什么问题？

标签： jquery html find nested each

【解决方案1】：

这是页面上唯一的 HTML 吗？因为

$("a").each(function() {
  // do something
});

会很好的

如果这不是页面上唯一的代码，这是页面上唯一的列表吗？在那种情况下

$("ul li a").each(function() {
  // do something
});

会很好。

如果需要更具体的内容，我建议像这样写

$(".article-list > li > a").each(function() {
  // do something
});

您正在尝试查找 H2 元素的子元素，但 H2 没有任何子元素。您的代码会建议您的 HTML 标记为这样

<h2>
  <ul class="article-list">
    <li><a href="#">link</a></li>
  </ul>
</h2>

编辑：另外，您的 html 标记错误。 <ul class="article-list> 应该是 <ul class="article-list">

【讨论】：

你是对的。我失焦了。 H2 没有孩子。感谢您的反馈。我已经更新了我的代码。谢谢。

【解决方案2】：

试试这个，它根据你当前的 html 元素。

$("ul li.category ul.article-list li a").each(function() {
    console.log("category: " + $(this).text());
    // do your action here
});

【讨论】：

控制台记录锚可以实现什么？为了清楚起见，他想记录类别名称并用锚做其他事情
这只是为了测试目的，检查选择器返回的元素。通过忽略日志，他可以在其中执行操作。

【解决方案3】：

您的 HTML 语法错误，您错过了关闭 "article-list" 类。那么在您的情况下不需要每个。您可以选择像 $('a') 这样的所有锚标记。如果您想选择 @ 中的所有锚987654324@ 类然后这样做$(".article-list a")

工作demo

【讨论】：