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

Question

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

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 
      });
    });
});

Answer 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">

Answer 2

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

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

Answer 3

你的 HTML 语法错误你错过了关闭 "article-list" class.Then 你的 case.You 中的每个都不需要 select 所有的锚标记像这样 $('a')。如果你想 select "article-list" class 中的所有锚点，那么这样做 $(".article-list a")

工作demo

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

jquery perform action with every element found with .find

html

each

jquery

nested

find