は、どのように私はjQueryので

Question

Htmlのこのコードでは、すべてのデータIDを検索し、読むために自分のクラスを設定するにはどうすればよい

<span class="unread" id="@item.TaskId" data-id="read"> @item.Title</span><br /> 

jqueryの

$("#notificationsBody > span").find("[data-id='read']").attr('class', 'read'); 

をデータatrributeを見つけることができますか？上記の行は機能していません。

Answer 1

find（）は子どもの深いところを通ります。しかし、子供たちは第一レベルの子供たちを経験します。それはdata-idを持っているスパンがありますので、それはファミリー・ツリーを検索するので、最適な方法で

$("#notificationsBody").chlidren("span[data-id='read']").addClass('read').removeClass('unread'); 

Answer 2

$("#notificationsBody span[data-id='read']").addClass("read").removeClass("unread"); 

Answer 3

、あなたは.find()を使用することはできません。代わりに.filter()を使用するか、それをセレクタに入れてください。

また、あなたはチェーンは、私はあなたのコードを実行しようと.removeClass()

$("#notificationsBody > span[data-id='read']") 
    .addClass('read'); 
    .removeClass('unread'); 

Answer 4

彼は働くことができ、あなたはクラスunreadを削除する必要がある場合は代わりに.attr()

$("#notificationsBody > span[data-id='read']").addClass('read'); 

の.addClass()を使用する場合があります。

$('.activate').click(function() { 
 
\t $("#notificationsBody > span").find("[data-id='read']").attr('class', 'read'); 
 
});

li { 
 
display:none; 
 
} 
 
.read { 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="notificationsBody"> 
 
    <span> 
 
    <ul> 
 
     <li data-id="read">a</li> 
 
     <li data-id="read">b</li> 
 
    </ul> 
 
    </span> 
 
</div> 
 
<button class="activate">Add read class</button>