使用 jQuery 在 Dom 树中查找之前出现的 class

Question

我想在 Dom 树的一部分中返回一个 class 之前出现的对象，如果之前没有出现，那么我想被告知.

上一次出现的定义：在每个循环中来自 $(this) 的“21ld”的上一次出现 - 基本上是在文本搜索整个“.window”时可以找到它的地方 classes 源代码从 $(this) 向后“21ld”。

html（非常非常简化，实际结构非常混乱不可预测）：

<div class='window'>

    <div class='093a'>
          <div class='a9a3'>
                <div class='21ld'></div>
         </div>
         <div class='99l1'>
                <div class='uuu99l1'>
                    <div class='saved'></div>
                </div>
         </div>
    </div>
    <div class='i93d'>
          <div class='ad9l3'>
                <div class='ool1ld'></div>
         </div>
    </div>
    <div class='j93d'>
          <div class='aid9l3'>
                <div class='okl1ld'></div>
         </div>
    </div>
    <div class='a93d'>
          <div class='9l3'>
                <div class='21ld'></div>
         </div>
    </div>
    <div class='rbl1'> 
         <div class='4l1'>
                <div class='saved'></div>
         </div>
    </div>
    <div class='r0l1'> 
         <div class='0adl1'>
                <div class='0l1'>
                      <div class='21ld'></div>
                </div>
         </div
    </div>
</div>

js:

$('.window').find('.21ld').each(function(index){
      console.log($(this).fromHereFindPreviousOccurence('.saved'));
});

所以我希望输出：

1: undefined/false/whatever
2: jQuery Object of first saved class from my example
3: jQuery Object of second saved class from my example

如果有人能帮助我，我会很高兴吗？ :)

Answer 1

我已经有一段时间没有使用 jQuery，但我刚刚测试了这个，我认为它应该可以工作。

编辑：我意识到这不一定每次都是return最接近的实例。为了实现你想要的，你实际上将不得不扩展你对 previous 或 closest 的定义，因为一旦你在树上行走一定距离，最接近另一个元素的元素在定义上变得有点相对。

function findClass(el, needle) {
    let element = el

    while (element.nodeName !== 'HTML') {

        if ($(element).find(needle).length) {
            return $(element).find(needle)
        }

        element = element.parent()
    }
}

Answer 2

所以你可以使用 .prev()。 jQuery reference. JS 看起来像这样：

$(window).each('.21ld', function (i){
    var saved =$(this).prev('.saved');
    console.log(saved);
    if(saved.length < 0){
        console.log('.saved not found on occurance: ' + i);
    }
});

Answer 3

此代码段将遍历 DOM 以查找上一个存档。它只有在结构保持不变的情况下才会起作用。如果父 div class 名字有一些押韵或原因，那么你可以写得更好一些。

var $window = $('.window'),
  //immediate div children
  $parentContainers = $('.window > div');

$window.find('.21ld').each(function() {
  var $currentElement = $(this),
    $prevSave;

  $parentContainers.each(function(i) {
    var $this = $(this),
      parentContainer = $(this).find($currentElement).length > 0,
      $innerSave = $this.find('.saved');

    if (parentContainer) {
      //breaks out of iteration if we've found the current element
      return false;
    } else if ($innerSave.length > 0) {
      //cache the most recent save elemen
      $prevSave = $innerSave;
    }
  });

  var text = typeof $prevSave === 'undefined' ? 'undefined' : $prevSave.text(),
    parent = typeof $prevSave === 'undefined' ? '' : ' in ' + $prevSave.parent().attr('class')

  //shows results using the parent class names
  console.log($currentElement.parent().attr('class') + ' found ' + text + parent);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class='window'>
  <div class='093a'>
    <div class='a9a3'>
      <div class='21ld'></div>
    </div>
    <div class='99l1'>
      <div class='uuu99l1'>
        <div class='saved'>first save</div>
      </div>
    </div>
  </div>
  <div class='i93d'>
    <div class='ad9l3'>
      <div class='ool1ld'></div>
    </div>
  </div>
  <div class='j93d'>
    <div class='aid9l3'>
      <div class='okl1ld'></div>
    </div>
  </div>
  <div class='a93d'>
    <div class='9l3'>
      <div class='21ld'></div>
    </div>
  </div>
  <div class='rbl1'>
    <div class='4l1'>
      <div class='saved'>second save</div>
    </div>
  </div>
  <div class='r0l1'>
    <div class='0adl1'>
      <div class='0l1'>
        <div class='21ld'></div>
      </div>
    </div </div>
  </div>

使用 jQuery 在 Dom 树中查找之前出现的 class

Use jQuery to find previous occurence of class in Dom Tree

html

javascript

jquery

screen-scraping