javascript - jQuery parent 选择器 - 遍历

Question

我有一个插入文章的数组。当我单击 h3(有标题)时，我想根据文章的索引显示更多信息。我想我需要去<section id="main">查找 <article> 的索引我点击了从我的<h3>开始.

这是我的 HTML:

    <section id="main" class="container">
      <article class="article">
        <section class="featuredImage">
          <img src="images/article_placeholder_1.jpg" alt="" />
        </section>
        <section class="articleContent">
            <a href="#"><h3>Test article title</h3></a>
            <h6>Lifestyle</h6>
        </section>
        <section class="impressions">
          526
        </section>
        <div class="clearfix"></div>
      </article>
    </section>

这是我获取索引的尝试:

$('.articleContent a').on('click', function(e) {
    var $target,
        $parent,
        $index;
    e.preventDefault();

    $target = $(e.target);
    $parent = $target.parents('.main');
    $index = $parent.find('.article').index();
    console.log($index);
});

Answer 1

您的 HTML 嵌套结构如下

section#main > article.article > section.articleContent > a

您必须搜索向上一级以上的祖先，因此 parent() 是不够的。

另一侧的

parents()可以为多个父级移动，并且通过传递选择器，您可以过滤父级。

$('.articleContent a').on('click', function(e) {
    e.preventDefault();
    var index = $(this).parents('.article').first().index();
    console.log(index);
});

因此这将找到第一个具有“article”类的元素。请注意，您还可以使用选择器“article.article”

来更具体