我正试图找出如何在用户单击按钮时找到两个不同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>
$(".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
应该是唯一的。
也许这一行:
$("li:contains(itemText)").remove()
应该是:
$("li:contains(" + itemText + ")").remove()
jQuery selactor没有关于作用域中变量的上下文。选择器是字符串,因此您需要从itemText变量构建一个字符串。
您正在搜索包含字符串"itemText"而非itemText变量值的li
元素。
更改
$("li:contains(itemText)").remove();
至
$("li:contains(" + itemText + ")").remove();