如何使用jQuery获取元素,而无法通过类,ID等引用它

Question

我有一张像这样的桌子:

<table>
<thead>
    <tr>
        <th>Hostname</th>
        <th>Action</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>127.0.0.1</td>
        <td><a name="delete" onclick="remove_host('127.0.0.1')">Remove</a></td>
    </tr>  
    <tr>
        <td>127.0.0.2</td>
        <td><a name="delete" onclick="remove_host('127.0.0.2')">Remove</a></td>
    </tr>  
    <tr>
        <td>127.0.0.3</td>
        <td><a name="delete" onclick="remove_host('127.0.0.3')">Remove</a></td>
    </tr>
</tbody>

我正在尝试做的是,当用户点击" 删除"时,该链接将替换为其中一个加载图像,因此用户无法重复点击该链接.

我怎么能得到这个a元素,所以我可以用jQuery相应地设置HTML？

在网站的其他部分,我能够附加rel="host-1"(或类似)链接,所以我可以轻松地引用它来更改HTML.

Answer 1

您可以使用属性选择器根据名称进行选择 <a/>

此外,您可以使用,one()因此处理程序仅触发一次.

$("a[name='delete']").one("click", function(){
   $(this).html("Doing something...")
});

关于jsfiddle的例子

注意,只是替换为.html()不会删除内联js,你可以.replaceWith()用来完全删除<a/>

$("a[name='delete']").one("click", function() {
    $(this).replaceWith($("<img/>").attr({src: "http://placekitten.com/g/50/50"}))
});

关于jsfiddle的例子

Answer 2

$('a[name="delete"]').click(function() {

});

编辑

不要使用内联 JS。写下下面的内容就干净多了。

$('a[name="delete"]').click(function() {
    var thehost = $(this).parent().prev().html();
    remove_host(thehost);
});