jQuery：从Click事件循环中选择Previous元素

请原谅我，如果以前有人问过这个问题，但我是jQuery的新手，甚至无法描述我的问题。我有一个PHP页面一个循环，看起来是这样的：“删除这个称号”jQuery：从Click事件循环中选择Previous元素

foreach ($blahs as $blah) { 
    echo '<p class="title">'.$blah->title.'</p>'; 
    echo '<input/>'; 
    echo '<input/>'; 
    echo '<div class="delete-button"><img /></div>'; 
}

我试图做到的是更换.$blah->title.短语在最接近的前一个<p>元素中，以任何一个<div class="delete-button">被点击。要做到这一点，我有一些页面顶部的jQuery像这样：

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery(".delete-button").click(function() { 
      jQuery(this).prev('.title').html("Delete this title?"); 
     }); 
    }); 
</script>

但是，这是行不通的。如果我删除.prev('.title')它将替换div的html，所以我知道它在某种程度上工作，但我无法设法取代之前的<p class="title">的html。谢谢你的帮助。

来源

2012-03-25 Nicholas Arehart

有啥基本上你想怎样？不要成为另一个[XY问题]（http://meta.stackexchange.com/q/66377） – Joseph 2012-03-25 03:27:46

您可以通过将所有物品包装在共同父级中并将单个处理程序附加到父级使用.on()而不是分配每个按钮的处理程序。与只有X列表中的X项目的处理程序数量相比，只有一个处理程序是性能优势。

另外，看到您的项目的结构，让我们来包装它们。它可以防止所有项目成为兄弟姐妹（从而使项目不同）。那么我们可以使用.sibling()方法来查找相对于按钮的标题。

此外，更好地使用列表，它们更具语义。

DEMO

<ul class="items"> 
    <li>  
     <p class="title">Blah title</p> 
     <input/><input/> 
     <div class="delete-button">Delete Button</div> 
    </li> 
    <li> 
     <p class="title">Blah title</p> 
     <input/><input/> 
     <div class="delete-button">Delete Button</div> 
    </li> 
    <li> 
     <p class="title">Blah title</p> 
     <input/><input/> 
     <div class="delete-button">Delete Button</div> 
    </li> 
</ul>

$(function(){ 

    //add a single handler to the parent instead of per button 
    $('.items').on('click','.delete-button',function(){ 
     //the "this" in here is the delete button element 
     //since the button and .title are siblings, use the sibling method 
     $(this).siblings('.title').text('Delete this title?');  
    }); 
});

来源

2012-03-25 03:41:37 Joseph

这是完美的。感谢您的精心解答和全面的解释。 – 2012-03-25 05:34:41

-2

使用$(this).prev().prev().prev()

，但它是100％与您的结构！

来源

2012-03-25 03:23:51

不正确..检查文档http://api.jquery.com/prev/ – 2012-03-25 03:33:54

完全正确，你应该检查定义而不是提供downvotes：“在匹配元素集合中的每个元素的前一个兄弟元素之前获取***，可选地通过选择器进行筛选。” – 2012-03-25 03:35:12

'.closest（）'会在DOM层次结构中上升一级或多级，寻找与选择器匹配的祖先，并在找到之后立即停止。如果标题是“this”的祖先，它将起作用。但在样本中，它似乎并不是一个祖先。 – 2012-03-25 03:35:52

总结你的相关元素在自己的格，按照本例为：http://jsfiddle.net/d6Vny/2/

你会发现，它的工作原理，如果你的HTML是：

<div>  
    <p class="title">Blah title</p> 
    <input/><input/> 
    <div class="delete-button">Delete Button</div> 
</div> 
<div> 
    <p class="title">Blah title</p> 
    <input/><input/> 
    <div class="delete-button">Delete Button</div> 
</div> 
<div> 
    <p class="title">Blah title</p> 
    <input/><input/> 
    <div class="delete-button">Delete Button</div> 
</div>

和你jQuery是：

jQuery(".delete-button").click(function() { 
    jQuery(this).siblings('.title').html("Delete this title?"); 
});

来源

2012-03-25 03:34:00

jQuery：从Click事件循环中选择Previous元素

回答

相关问题