Question

请原谅我，如果之前已经问过这个问题，但我是jQuery的新手，甚至无法描述我的问题。我在php页面中有一个循环，看起来像这样：

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。谢谢你的帮助。

Answer 1

您可以通过将所有项目包装在公共父级中并使用.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?');       
    });
});

Answer 2

根据此示例将相关元素包装在自己的div中：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?");
});

Answer 3

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

但它100％绑定到您的结构！

jQuery：从Click Event In Loop中选择上一个元素

3 个答案: