jquery - jQuery:子要素を選択しますが、親を変更したいですか?

Question

jQueryについて質問があります

<ul class="tabs">
    <li class="active"><a href="#doc-new">Home</a></li>
    <li><a href="#doc-fav">Profile</a></li>
    <li><a href="#doc-read">Messages</a></li>
</ul>

jQuery を使用して<li>、<a>have href is doc-readでアクティブに設定する方法は?

<ul class="tabs">
        <li><a href="#doc-new">Home</a></li>
        <li class="active"><a href="#doc-fav">Profile</a></li>
        <li><a href="#doc-read">Messages</a></li>
</ul>

#doc-readは見つかりますがaddClass、親にする方法がわかりません<li>。

Answer 1

「jQuery を使用<li>し<a>て、id が doc-read の場合にアクティブに設定する方法は?」

それは「id」ではなく、「href」です。とにかく、次のようにします。

$('a[href="#doc-read"]').parent().addClass("active");

しかし、アイデアが、クリックされたばかりのアンカー要素に対して li をアクティブに設定することである場合は、次のようにします。

$(document).ready(function() {
    $("ul.tabs a").click(function() {          // when any anchor clicked
        $("ul.tabs li").removeClass("active"); // remove current "active"
        $(this).parent().addClass("active");   // set "active" on parent
                                               // of clicked anchor
    });
});

デモ: http://jsfiddle.net/tsSQq/

Answer 2

「doc-read」のようなアンカータグIDを指定します。

$(".tabs li").removeClass('active')
$(".tabs li").find("#doc-read").parent('li').addClass('active');

ここで試してみてください-jsFiddle

Answer 3

以下のクエリが見つかり、完全に機能します。

$('li:has(a[href="#doc-fav"])').addClass('active');

Answer 4

addClass() と removeClass() を使用するだけです

$(".tabs>li:eq(0)").removeClass("active");
$(".tabs>li:eq(1)").addClass("active");