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”

，您还可以更具体

jQuery父选择器 - 遍历

1 个答案: