使用jQuery查找Dom Tree中類的先前出現

Question

我想返回Dom Tree的一部分中上一次出現的類的Object，如果沒有以前出現的類，那么我想告訴我。

上次出現的定義：在每個循環中$（this）中從$（this）上一次出現的“ 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已經有一段時間了，但是我剛剛測試了一下，我認為它應該可以工作。

編輯 ：我意識到這並不一定每次都返回最接近的實例。 為了實現所需的功能，實際上必須擴展對前一個或最接近的定義，因為一旦您沿樹走了一定距離，最接近另一個元素的元素就會在定義上變得相對。

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參考。 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);
    }
});