すべてのli要素を取得する方法ulでクラスshow-skillを持っています

Question

私はすべてのこれらのli要素を取得したいと思いますulでクラスshow-skillを持っている、私は以前のクラスを削除し、それ。

<div> 
    <ul> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li class="show-skill">sdfkjd</li> 
    <li class="show-skill">sdfkjd</li> 
    <li class="show-skill">sdfkjd</li> 
    <li class="show-skill">sdfkjd</li> 
</ul> 
</div> 

<label> 
    <a href="#" onclick="get_li(this);"> 
</label>  

</div> 

var abc = $(obj).parent().parent().children(':first-child').hasClass('show-skill'); 
$(abc).removeClass().addClass('new_class'); 

私は同じ名前で来て、多くのレコードがありますので、私は上をクリックしないで他の人を一つだけにエフェクトを作りたい、親道の親を通過する必要があり、私は一つのコードを持つようにしたいですすべてのために。

Answer 1

上のjQueryを使用するをクリック機能を追加することになります参照してください。 cを更新しました上のクリックされたリンクはulであなたを親を共有していないので、ODE、あなたが使用しようとしているおかげで

function get_li(obj){ 
 
$('#'+obj + ' li').each(function() { 
 
    if($(this).hasClass('show-skill')) 
 
    $(this).removeClass('show-skill').addClass('new_class'); 
 
}); 
 
console.log($('#'+obj + ' li')); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div > 
 
    <ul id="listEle"> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li class="show-skill">sdfkjd</li> 
 
    <li class="show-skill">sdfkjd</li> 
 
    <li class="show-skill">sdfkjd</li> 
 
    <li class="show-skill">sdfkjd</li> 
 
</ul> 
 
</div> 
 

 
<label> 
 
    <a href="#" onclick="get_li('listEle');">click</a> 
 
</label>  
 

 
</div>

Answer 2

あなたのためにJSFiddleを作成しました。

HTML

<ul> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li class="show-skill">sdfkjd</li> 
    <li class="show-skill">sdfkjd</li> 
    <li class="show-skill">sdfkjd</li> 
    <li class="show-skill">sdfkjd</li> 

テスト

jQueryの

$(".myBtn").click(function(){ 
    $("ul li.show-skill").removeClass("show-skill").addClass("test"); 
}); 

私はADDE変更が観察できるようにCSSクラスを作成します。

CSS

.test{ 
    background-color:blue; 
} 

は、このことができますなら、私に教えてください。

Answer 3

私はこの

HTML

<button onclick="myFunction()">Click me</button> 

のようにjQueryの

function myFunction() { 
    $('ul li.show-skill').removeClass('show-skill').addClass('newclass'); 
    } 

または私はクリック

$('.button').on('click',function(){ 
    $('ul li.show-skill').removeClass('show-skill').addClass('newclass'); 
}) 

Answer 4

.parent()セレクタは、特定のHTMLに動作しません。操作したい。

が現実の生活に共有親要素であると仮定すると、それに到達するための最良の方法は、.closest()である - あなたがでHTMLの構造を変更した場合、それは破るよと連鎖する複数の.parent()、非常に壊れやすいです一緒に呼び出し、すべて。途中で同じこと：.find()を使用して、子呼び出しを連鎖するのではなく、すべての要素が一致するリストを取得します。

var get_li = function(anchor) { 
 
    $(anchor) 
 
    .closest('.sharedparent') // gets container 
 
    .find('li.show-skill')  // gets all contained .show-skill elements 
 
    .removeClass('show-skill') // removes class 
 
    .addClass('new-class');  // adds new class 
 
}

.show-skill { 
 
    background-color: #F00 
 
} 
 

 
.new-class { 
 
    background-color: #0F0 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sharedparent"> 
 
    <div> 
 
    <ul> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li class="show-skill">sdfkjd</li> 
 
     <li class="show-skill">sdfkjd</li> 
 
     <li class="show-skill">sdfkjd</li> 
 
     <li class="show-skill">sdfkjd</li> 
 
    </ul> 
 
    </div> 
 
    <label> 
 
    <a href="#" onclick="get_li(this);">click</a> 
 
    </label> 
 
</div>

（可能であれば良いが、まだ、親要素に特定のIDやクラス名を入れて、代わりにすべての相対的なDOM検索を使用することに基づいて、あなたの電話をかけることであろう - 相対トラバーサルを使用する唯一の理由は、複数のコンテナをそれぞれ別々に同じ動作を使用する必要がある場合です。