Используйте jQuery, чтобы найти предыдущее появление класса в Dom Tree

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

Этот фрагмент кода будет пересекать 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, но я только что протестировал это, и я думаю, что он должен работать.

EDIT: Я понимаю, что это не обязательно возвращает ближайший экземпляр каждый раз. Чтобы достичь того, чего вы хотите, вам действительно нужно расширить свое определение предыдущего или самого близкого, потому что, как только вы подходите к дереву на определенное расстояние, элемент, который ближе всего к другому элементу, становится несколько относительным.

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); 
    } 
});