jQuery父母选择器-遍历

Question

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

这是我的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” ，您也可以更加具体