0

ユーザーがボタンをクリックしてすべて削除できるように、2 つの異なる 'ul' にあるテキストが一致する 'li' アイテムを見つける方法を見つけようとしています。ボタンは各「li」に追加され、そこからテキストを正常に取得して元のアイテムを削除できます。「li」はソート可能であり、ユーザーはさらに追加できるため、これは「li」の場所では実行できません。

今、私はこれを持っています（より理解しやすくするためにいくつかのものを削除しました）：

Javascript:

$("li")
    .prepend("<span class='ui-icon'></span>")    

$(".ui-icon")
    .click(function() {
        var itemText = $(this).closest("li").text();

        $(this).closest("li").fadeOut(200, function() {
            $(this).remove();
        }); 

        $("li:contains(itemText)").remove(); //the part I'm having trouble with 
    })

HTML:

<ul id="items">
    <li>
        <h3 id="title">Title1</h3>
        <p id="body">Body1</p>
    </li>
    <li>
        <h3 id="title">Title2</h3>
        <p id="body">Body2</p>
    </li>
    <li>
        <h3 id="title">Title3</h3>
        <p id="body">Body3</p>
    </li>
    <li>
        <h3 id="title">Title4</h3>
        <p id="body">Body4</p>
    </li>
</ul>
<ul id="favs">
    <li>
        <h3 id="title">Title2</h3>
        <p id="body">Body2</p>
    </li>
    <li>
        <h3 id="title">Title3</h3>
        <p id="body">Body3</p>
    </li>
    <li>
        <h3 id="title">Title1</h3>
        <p id="body">Body1</p>
    </li>
    <li>
        <h3 id="title">Title4</h3>
        <p id="body">Body4</p>
    </li>
</ul>
4

3 に答える 3

2 
$(".ui-icon")
    .click(function() {
        var item = item.closest("li");
        var itemText = item.text();
        var parentUL = item.closest("ul");

        item.fadeOut(200, function() {
            item.remove();
        }); 

        parentUL.siblings('ul').find("li:contains(" + itemText + ")").remove(); //the part I'm having trouble with 
    })

これがあなたが探しているものだと思います。これにより、フェードアウトしているもの以外が確実に削除されます。

余談ですが、ids は一意である必要があります。

于 2013-08-12T18:55:19.907 に答える
1

おそらくこの行：

$("li:contains(itemText)").remove()

次のようにする必要があります。

$("li:contains(" + itemText + ")").remove()

jQuery セレクターには、スコープ内の変数に関するコンテキストがありません。セレクターは文字列であるため、itemText 変数から文字列を作成する必要があります。

于 2013-08-12T18:57:18.933 に答える
0

liitemText 変数の値ではなく、文字列 'itemText' を含む要素を検索しています。

変化する

 $("li:contains(itemText)").remove();

に

 $("li:contains(" + itemText + ")").remove();
于 2013-08-12T18:55:18.297 に答える