jQuery：在</p> <li> </li>中选择<p>标签

Question

当我选择删除按钮时，我正在尝试使用jquery淡出<p>内的<li>标记。

<ul>
    <li>
        <p>Here is some text!</p>
        <span class="delete">Delete</span>
    <li>
<ul>

到目前为止，这是我的jQuery：

$(".delete").click(function(){
    //Needs to select the <p> tag within the same <li> 
    $("p").fadeOut(); 
});

Answer 1

引用您的结构，只需：

$(".delete").click(function(){
    //Needs to select the <p> tag within the same <li> 
    $(this).prev("p").fadeOut(); 
});

如果p可能不是立即删除链接的前身，那么您可以这样做：

$(".delete").click(function(){
    //Needs to select the <p> tag within the same <li> 
    $(this).closest("li").find("p").fadeOut(); 
});

...这将淡出在p中找到的所有 li元素，或者这个：

$(".delete").click(function(){
    //Needs to select the <p> tag within the same <li> 
    $(this).closest("li").find("p").first().fadeOut(); 
});

...这会淡出它在p中找到的第一个 li元素，或者这个：

$(".delete").click(function(){
    //Needs to select the <p> tag within the same <li> 
    $(this).prevAll("p").first().fadeOut(); 
});

...这将淡出它从删除链接向后找到的第一个兄弟。

参考文献：

• prev - 找到立即上一个兄弟，如果它与选择器不匹配则没有
• closest - 找到与选择器匹配的最近祖先
• find - 查找与选择器匹配的所有后代
• prevAll - 以反向文档顺序查找与选择器匹配的所有先前兄弟节点（例如，从当前元素向后工作）
• first - 只获取当前集合中的第一个元素

Answer 2

$(".delete").click(function () {
    //Needs to select the <p> tag within the same <li> 
    $(this).closest("li").find("p").fadeOut(); 
});

...或者您使用parent()代替closest()。

如果<p> 总是在<span>之前，您也可以这样做：

$(".delete").click(function () {
    //Needs to select the <p> tag within the same <li> 
    $(this).prev("p").fadeOut(); 
});