jQuery:在 <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(); 
});

...这将淡出它在 li 中找到的所有 p 元素，或者这样:

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

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

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

...它将淡出它发现的从删除链接向后工作的第一个同级。

引用文献:

• prev - 查找直接的上一个同级，或者如果它与选择器不匹配则什么也不找到
• closest - 找到与选择器匹配的最近的祖先
• find - 查找与选择器匹配的所有后代
• prevAll - 以相反的文档顺序查找与选择器匹配的所有先前同级元素(例如，从当前元素向后工作)
• first - 只抓取当前集合中的第一个元素