comment trouver l'élément html par sa valeur

Question

Je veux trouver un élément html par sa valeur. J'ai essayé avec id, mais mon cas est fragile:

code pseudo:

for user in users: 
<li id="followed" onclick="follow($(this).text())"><a class="follow">user.name</a></li> 
endfor 

Je veux que chaque nom d'utilisateur sera cliquable et je suis le sauver dans DB et annexant « sauvé » à la fin de la partie du nom d'utilisateur. comme ceci:

"username" ==> after click: "username saved" 

Je fais ceci par ajax.

function follow(data){ 
    var Him = data; 
    alert(Him); 
    $.ajax({ 
     url: "/follow", 
     type: "POST", 
     datatype: "html", 
     data: {Him: Him} 
    }).success(function(response){ 
     $('#followed').append(response); 
    }); 
} 

Ce code est très bien, mais il est la réponse Annexer des « sauvé » que le premier nom d'utilisateur, car la fin de la boucle, tous les noms d'utilisateur ont id='followed'.

C'est pourquoi, je veux trouver l'élément html par sa valeur. par exemple. "Nom d'utilisateur".
Est-ce possible?

Answer 1

Vous pouvez utiliser le paramètre context pour modifier le contexte transmis au rappel de succès de la requête AJAX.

Mais d'abord, commençons par le nettoyage de votre balisage et en utilisant un nom de classe au lieu d'id si cela est une boucle, car comme vous le savez ids doit être unique en HTML:

for user in users: 
    <li class="followed"><a class="follow">user.name</a></li> 
endfor 

Bon, maintenant que nous avons nettoyé le balisage de laisser abonnez-vous à l'événement discrètement .click() de cette <li>:

$(function() { 
    $('.followed').click(function() { 
     // Remark: maybe you wanna get just the username inside the anchor in which case 
     // you probably need "var Him = $('a', this).text();" 
     var him = $(this).text(); 
     $.ajax({ 
      url: '/follow', 
      type: 'POST', 
      dataType: 'html', 
      context: this, // <!-- Here, that's the important bit 
      data: { him: him }, 
     }).success(function(response) { 
      // since we have used the context, here 'this' will no 
      // longer refer to the XHR object (which is the default) but 
      // to whatever we have passed as context (in our case this 
      // happens to be the <li> that was clicked) => we can be certain 
      // that we are updating the proper DOM element 
      $(this).append(response); 
     }); 
    }); 
});