无法使用jQuery.siblings()

时间:2016-02-03 21:28:38

标签: javascript jquery

考虑以下标记(缩写):



<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;
&#13;
&#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>这么多次更好的方法呢?

2 个答案:

答案 0 :(得分: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;

答案 1 :(得分:1)

您的代码存在的问题是,.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>