帮助使用jQuery选择正确的元素

Question

我有以下HTML：

<div class="result-row odd"> 
<div class="domain-name">first-domain.com</div> 
<div class="domain-functions"> 
    <a onclick="deleteDomain(1)" href="javascript:void(0);"> 
    <img height="24" width="24" alt="48x_delete" src="images/48x_delete.png"> 
    </a> 
    <a onclick="editDomain(1)" href="javascript:void(0);"> 
    <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png"> 
    </a> 
</div> 
</div> 

    <div class="result-row even"> 
<div class="domain-name">second-domain.com</div> 
<div class="domain-functions"> 
    <a onclick="deleteDomain(2)" href="javascript:void(0);"> 
    <img height="24" width="24" alt="48x_delete" src="images/48x_delete.png"> 
    </a> 
    <a onclick="editDomain(2)" href="javascript:void(0);"> 
    <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png"> 
    </a> 
</div> 
</div> 

我想点击编辑按钮时用的输入字段来代替first-domain.com ...

我到目前为止：

function editDomain() { 
    $('.domain-name').html('<input class="inline" type="text"/><input class="inline" type="button" value="save"/>'); 
} 

这改变了我所有的标题 - 什么是最好的方式来取代只有正确的标题？

Answer 1

首先，将您的HTML切换为使用类的链接并删除内联事件处理程序。

<div class="result-row odd"> 
<div class="domain-name">first-domain.com</div> 
<div class="domain-functions"> 
    <a class="deleteDomain" href="#delete1"> 
    <img height="24" width="24" alt="48x_delete" src="images/48x_delete.png"> 
    </a> 
    <a class="editDomain" href="#edit1"> 
    <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png"> 
    </a> 
</div> 
</div> 

然后使用jQuery事件绑定，利用该方法.closest()到您的.html()改变隔离到相关领域。

$(function(){ 
    $('.editDomain').click(function(){ 
    $(this).closest('.result_row').find('.domain-name').html('<input class="inline" type="text"/><input class="inline" type="button" value="save"/>'); 

    return false; 
    }); 
    $('.deleteDomain').click(function(){ 
    return false; 
    }); 
}); 

Answer 2

将变更应用于元素，因为它们只需要以下内容。不兼容IE，但可以这样做。你需要被点击的元素的兄弟。或者，您可以（也可能）在页面加载后绑定点击事件。查看不引人注目的JavaScript，以获得关于为什么更好的一些建议。

<a onclick="editDomain()" href="javascript:void(0);"> 
<img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png"> 
</a> 

function editDomain(e) { 
    $(e.srcElement).siblings('.domain-name').html('<input class="inline" type="text"/><input class="inline" type="button" value="save"/>'); 
} 

Answer 3

首先，我建议你添加一些更改HTML代码

<div class="result-row odd" id="0"> 
<div class="domain-name">first-domain.com</div> 
<div class="domain-functions"> 
    <a id="delete"> 
    <img height="24" width="24" alt="48x_delete" src="images/48x_delete.png"> 
    </a> 
    <a id="edit"> 
    <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png"> 
    </a> 
</div> 
</div> 

<div class="result-row even" id="1"> 
<div class="domain-name">second-domain.com</div> 
<div class="domain-functions"> 
    <a id="delete"> 
    <img height="24" width="24" alt="48x_delete" src="images/48x_delete.png"> 
    </a> 
    <a id="edit"> 
    <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png"> 
    </a> 
</div> 
</div> 

您可以添加一个click方法给每个div的你有这样的

$('div[class^=result-row]').find('div a[id="delete"]').click(function(){ 
     $(this).closest().remove(); 
}); 

你可以这样做与编辑功能，添加一个点击到每个div id =“编辑”

$('div[class^=result-row]').find('div a[id="edit"]').click(function(){ 
     $(this).closest().find('.domain-name').html("yourCustomHTMLHere"); 
});