Question

考虑以下标记（缩写）：

＆＃13;

<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>

＆＃13;

我目前正在使用.closest()函数从锚标记遍历树。我这样做的代码是：

    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')（背后有所有内容）时，它会返回undefined ...我很好奇所以我也尝试了.parent().children('header')和{{1}但是都没有用。

两个问题..

为什么jQuery找不到我的.siblings()[0]标签？我似乎错过了一个元素？
有没有比重复<header>这么多次更好的方法呢？

Answer 1

您找不到header元素，因为如果closest()认为合适，closest('div')会自行返回，因此在您的情况下，ul调用链只返回第一个div（ header标记周围的一个，其中$(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>

#define CLASS_WITH_MY_TYPE(ClassName) \ 
    class ClassName                   \
    {                                 \
       using MyType = ClassName;

Answer 2

您的代码存在的问题是，.closest()会获得包含其自身的最接近的元素，因此如果您拥有$("div#foo").closest("div")，则会获得div#foo。

当你链接.closest("div").closest("div")等等时，你被困在同一个元素上。

取自docs：

.closest() 从当前元素开始。向上移动DOM树，直到找到所提供选择器的匹配项。返回的jQuery对象包含原始集中每个元素的零个或一个元素，按文档顺序

这是一个演示这个的片段，解决这个问题的方法是使用类/ ID。

var stop = $("#form")
               .closest('li')
               .closest('ul')
               .closest('div') //#stop
               .closest('div') //#stop
               .closest('div'); //#stop, you get the idea.

//Stop
console.log(stop.attr("id"));                                                               

//Another test
console.log($("#test-form").closest("form").attr("id")); //#test


//get h1
var H1 = $("#form")
          .closest(".sibling") //use a class.
          .siblings("header")
          .children('h1').text();

console.log(H1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section>
  <header>
    <picture>      
      <img/>
    </picture>
      <h1>someText</h1>
  </header>
  <div class="sibling">
    <div>...</div>
    <div>
      <div id="stop">
        <ul>
          <li>
            <h4>...</h4>
            <p>...</p>
            <form id="form">
              <p>
                <a href="" id="link">...</a>
              </p>
            </form>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

<form id="test-form">

</form>

无法使用jQuery.siblings（）

2 个答案: