ULのグループ内のすべての以前のLIを見つける

Question

次のコードで、選択されたliのすべての以前のLIを選択します。私はそれが.closest（）と.prev（）または.prevAll（）のいくつかの組み合わせであると推測していますが、複数の親からすべてを選択することに固執しています。前もって感謝します！

あなたは自分の選択した要素の prevAll()を使用することができます

<div id="thumbsContainer"> 
    <div class="categoryContainer"> 
    <ul> 
     <li>thing</li> 
     <li>thing</li> 
     <li>thing</li> 
     <li>thing</li> 
     <li>thing</li> 
     <li>thing</li> 
    </ul> 
    </div> 

    <div class="categoryContainer"> 
    <ul> 
     <li>thing</li> 
     <li>thing</li> 
     <li>thing</li> 
     <li>thing</li> 
     <li>thing</li> 
     <li>thing</li> 
    </ul> 
    </div> 

    <div class="categoryContainer"> 
    <ul> 
     <li>thing</li> 
     <li>thing</li> 
     <li class="selected">thing</li> 
     <li>thing</li> 
     <li>thing</li> 
     <li>thing</li> 
    </ul> 
    </div> 
</div> 

Answer 1

あなたは

const getPreviousListItems = (callback) => { 
 
    const previousListItems = []; 
 

 
    $('li').each((index, elem) => { 
 
    if(!$(elem).hasClass('selected')){ 
 
     previousListItems.push(elem); 
 
    } 
 
    else{ 
 
     return callback(previousListItems); 
 
    } 
 
    }); 
 
}; 
 

 

 
getPreviousListItems((previousListItems) => { 
 
    console.log(previousListItems); 
 
    $(previousListItems).each((index, elem) => { 
 
    $(elem).css('background-color', '#BBDEFB'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="thumbsContainer"> 
 
    <div class="categoryContainer"> 
 
    <ul> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="categoryContainer"> 
 
    <ul> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="categoryContainer"> 
 
    <ul> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li class="selected">thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
    </ul> 
 
    </div> 
 
</div>

0123、と以前のすべての liの要素を見つけることができます

previousListItemsは、選択されたものの前にliの要素がある場合に成ります。

Answer 2

：

$(".selected").prevAll().css("color", "green");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="categoryContainer"> 
 
    <ul> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li class="selected">thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
    </ul> 
 
    </div>

Answer 3

liのそれぞれには2つのセットがあり、1つはターゲットliと同じ親にあり、他のペアは他のペアレントの中にありますが、ターゲットは先にliです。

li 'と同じレベルの2つの配列と、異なる親の中のliの2つの配列を作成してマージしました。

$("li").click(function() { 
 
    var prevLi1 = $(this).closest(".categoryContainer").prevAll(".categoryContainer").find("li"); 
 
    var prevLi2 = $(this).prevAll("li"); 
 
    var allPrevLis = $.merge(prevLi1, prevLi2); 
 
    //To Display the prev lis 
 
    allPrevLis.each(function() { 
 
    $(this).css('color', 'red') 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="thumbsContainer"> 
 
    <div class="categoryContainer"> 
 
    <ul> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="categoryContainer"> 
 
    <ul> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="categoryContainer"> 
 
    <ul> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li class="selected">thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
     <li>thing</li> 
 
    </ul> 
 
    </div> 
 
</div>