jQuery: выберите тег <p>в пределах <li>

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