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 不是兄弟。相反，这是我会尝试的:

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

这将一直跳到包含所有其他元素的部分，然后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>