考虑以下标记(缩写):
<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}但是都没有用。
两个问题..
.siblings()[0]
标签?我似乎错过了一个元素?<header>
这么多次更好的方法呢?答案 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>