使用 jQuery 在 Dom 树中查找先前出现的类

Question

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

上一次出现的定义：在每个循环中，上一次出现的“21ld”来自 $(this) - 基本上是在您可以找到它的地方，当文本搜索整个“.window”类源代码向后查找来自 $ 的“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

这个 sn-p 将遍历 DOM 以找到以前的保存。只有结构保持不变，它才会起作用。如果父 div 类名有一些押韵或理由，那么你可以写得更好。

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>

Answer 2

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

编辑：我意识到这不一定每次都返回最近的实例。为了实现你想要的，你实际上必须扩展你对先前或最近的定义，因为一旦你沿着树走一定距离，最接近另一个元素的元素在定义上变得有点相对。

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

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

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

        element = element.parent()
    }
}

Answer 3

所以你可以使用.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);
    }
});