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"课程。然后您的案例中不需要每个。您可以选择所有锚标记，例如$('a')。如果您想要全部选择"article-list"类中的锚点就像这样$(".article-list a")

工作demo

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

3 个答案: