Как я могу получить элемент с помощью 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, так сказать, чтобы я мог соответственно установить HTML с помощью jQuery?

В других частях сайта я могу прикрепить 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);
});

Answer 3

Вы можете передать this в вызове remove_host, например:

remove_host('127.0.0.1', this);

Это даст вам ссылку на элемент DOM, который вы можете обернуть в jQuery.

Answer 4

при использовании jQuery ...

<script type=text/javascript>
$("document").ready( function(){
    $("a[name=delete]").click(function(){
        $(this).hide().after('<img src="loading.png" />');
    });
});
</script>

Answer 5

Я не уверен, что вы можете изменить разметку или нет, но вот один из вариантов.

<tr>
  <td>120.0.0.2</td>
  <td><a name="delete" data-ip="120.0.0.2">Remove</a></td>
</tr>

$("a[name=delete]").one("click", function(e) {
  e.preventDefault();
  $("<span>Loading</span>").insertBefore(this);
  var ip = $(this).hide().data("ip");
  remove_host(ip);
});