javascript - 使用 jQuery.siblings() 找不到 <header> 标记

Question

考虑以下标记(缩写):

<section>
  <header>
    <picture>
      <source>...</source>
      <img>...</img>
      <h1>someText</h1>
  </header>
  <div>
    <div>...</div>
    <div>
      <div>
        <ul>
          <li>
            <h4>...</h4>
            <p>...</p>
            <form>
              <p>
                <a href="...">...</a>
              </p>
            </form>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

我目前正在使用.closest()函数从 anchor 标记开始遍历树。我执行此操作的代码是:

    var form = $(this).closest('p').closest('form');
    var detailPageH1 = form.closest('li').closest('ul').closest('div').closest('div').closest('div').siblings('header').children('h1').text();

每个.closest()调用有效，但是当我评估 .siblings('header') 时(及其背后的所有内容)它返回未定义...我很好奇，所以我也尝试了 .parent().children('header')和.siblings()[0]但都不起作用。

两个问题..

• 为什么 jQuery 找不到我的 <header>标签？我好像没有漏掉什么元素？
• 有没有比重复 .closest() 更好的方法来做到这一点？这么多次？

Answer 1

您找不到 header元素因为 closest()如果它认为合适，则返回自身，因此在您的情况下， closest('div') 的链调用只是返回第一个 div(ul 标签周围的那个)，其中 header不是 sibling 。相反，我会尝试以下方法:

$(this).closest('section').find('header h1').text();

这将一路跳转到 section包含所有其他元素，然后 find()向下遍历到h1 header内，您可以从中获取文本。

$(function() {
  var $a = $('a').eq(0);
  alert($a.closest('section').find('header h1').text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <header>
    <picture>
      <source />
      <img />
      <h1>someText</h1>
     </picture>
  </header>
  <div>
    <div>...</div>
    <div>
      <div>
        <ul>
          <li>
            <h4>...</h4>
            <p>...</p>
            <form>
              <p>
                <a href="...">...</a>
              </p>
            </form>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>