jquery - 如何使用 Jquery 遍历 dom

Question

如果我有这个：

<h1>or if the title before doesn't exist then this title</h1>
<div>
  <h2>this title</h2>
  <span id="something">
    some other stuff
  </span>
  <span id="this">
    I am here
  </span>
</div>
<h2>Not this title</h2>

据我了解$(':header')应该找到标题。我需要它从$('#this').

Answer 1

这很可怕，但它是一个适用于任何嵌套级别的块：

var $this = $('#this');

$this.add($this.parents()).map(function() {
  return $(this).prevAll(':header').eq(0);
}).get().pop();

扩展：

$this.add(
  $this.parents()        // Adds $this's parents to the current selecor
).map(function() {       // Iterates over the selector
  return $(this)         // Returns each element's
    .prevAll(':header')  // Closest sibling header, vertically
    .eq(0);              // The first one
})
.get()                   // Gets the array from the jQuery object
.pop();                  // Trick for getting the last element

演示： http: //jsfiddle.net/xtQ2M/5/（尝试删除东西）

Answer 2

var headers = $('#this')
        .prevAll(':header')  // all header within parent of `#this`
        .add($('#this')
                      .parent() // go to parent of `#this`
                       .prev(':header') // got the header out of `#this` parent
          );  // output [h1, h2];

演示

获取h1，使用headers[0]；

获取h2，使用headers[1]；

也可以使用

$('#this')
         .prevAll(':header')  // all header within parent of `#this`
         .add($('#this')
                        .parent() // go to parent of `#this`
                        .prev(':header') // got the header out of `#this` parent
          ).
          .eq(0); // output: h1, if you use .eq(2) will get h2

Answer 3

如果您想在将来更改逻辑的某些部分，这似乎是一种非常易读的方法：

var target = $('#this'),
    closestHeader = target.siblings(':header');

while (!closestHeader.length) {
    target = target.parent();
    closestHeader = target.siblings(':header');
}
closestHeader = closestHeader[0];

注意：如果页面上绝对没有标题，这将卡住，因此您可能需要先添加一个检查。

看演示

Answer 4

您应该能够使用$(this).closest('h2');或$(this).closest('header');很难用您的示例代码来判断。有关更多信息，请参阅jQuery.closest()。