Question

我正在试图找出当用户点击按钮时，如何找到具有两个不同'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>

Answer 1

$(".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 
    })

我认为这是你正在寻找的东西。这样可以确保删除除了淡出之外的任何内容。

除此之外，id应该是唯一的。

Answer 2

也许这一行：

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

应该是：

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

jQuery selctors没有关于范围中变量的上下文。选择器是字符串，因此您需要从itemText变量构建一个字符串。

Answer 3

您正在搜索包含字符串'itemText'的li元素，而不是itemText变量的值。

更改

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

到

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

在单独的UL中搜索匹配的LI项目

3 个答案: