¿Cómo tomo un elemento con jQuery sin una forma de referenciarlo a través de clase, ID, etc.?

Tengo una mesa así:

<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>

Lo que intento hacer es, cuando un usuario hace clic en Eliminar, que el enlace se reemplaza con una de esas imágenes de carga para que el usuario no pueda presionar repetidamente el enlace.

¿Cómo obtengo el a elemento, por así decirlo, para que pueda configurar el HTML en consecuencia con jQuery?

En otras partes del sitio, puedo adjuntar un rel="host-1" (o similar) al enlace, por lo que puedo hacer referencia a él fácilmente para cambiar el HTML.

preguntado el 16 de mayo de 11 a las 19:05

5 Respuestas

Puede utilizar el selector de atributos para seleccionar según el nombre del <a/>

Además, puedes usar one() por lo que el manejador solo dispara una vez.

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

Ejemplo en jsfiddle

nota al margen, solo reemplazando con.html() no eliminará los js en línea, puede usar .replaceWith() para eliminar completamente el <a/>

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

Ejemplo en jsfiddle

contestado el 16 de mayo de 11 a las 23:05

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

});

EDITAR

No use JS en línea. escribir lo siguiente es mucho más limpio.

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

contestado el 16 de mayo de 11 a las 23:05

Para el selector de atributos iguales, las comillas son obligatorio', ref: atributo-igual-selector en la API. - David dice reinstalar a Monica

Podrías pasar this en la llamada a remove_host, así:

remove_host('127.0.0.1', this);

Esto le dará una referencia al elemento DOM, que puede envolver en jQuery.

contestado el 16 de mayo de 11 a las 23:05

No estoy seguro de si puede cambiar el marcado o no, pero aquí hay una opción.

<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);
});

contestado el 16 de mayo de 11 a las 23:05

si usa jQuery ...

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

contestado el 16 de mayo de 11 a las 23:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.