Sélectionnez l'élément le plus proche

J'ai le code html suivant :

  <table id="objects">
    <tr>
        <td>
            <input type="text" value="2" />
        </td>
        <td>
            <a href="#" class="delete">link</a>
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" value="4" />
        </td>
        <td>
            <a href="#" class="delete">link</a>
        </td>
    </tr>    
  </table>

Quand je clique balise d'ancrage, je voudrais sélectionner <input> la plus proche de mon lien, et obtenez sa valeur. Comment puis-je faire cela ? J'ai essayé :

  $('.delete').click(function(e){
    e.preventDefault();
    var val = $(this).closest('input').attr('value');
    alert(val);
  });

mais sans succès.

OriginalL'auteur magda | 2010-11-01

  1. 3

    Le nom de la closest fonction est extrêmement trompeur: c'est en fait le plus proche de l'ancêtre qui est retourné.

    Le bon code serait:

    var value = $(this).parent().siblings('td').children('input').val();

    Je ne recommanderais pas de liaison le gestionnaire d'événement à alllllllll d'ancrage balises; ce sera inefficace si il y a un certain nombre de ces éléments sur la page. Au lieu de cela, je voudrais fortement vous recommandons d'utiliser délégué() ou live() à la place.

    $('#objects').delegate('a.delete', 'click', function (e) {
    e.preventDefault();
    var val = $(this).parent('td').siblings('td').find('input').attr('value');
    alert(val);
});

    Cela aura pour effet de lier le gestionnaire d'événement à l' table (une fois), puis utilise le Javascript événement bouillonnement des mécanismes permettant de détecter le clic sur les éléments qui correspondent au sélecteur passé en premier argument (dans ce cas, votre supprimer des boutons).

    cette seconde approche me donne ('#objets").déléguer n'est pas une fonction dans firebug :/
    Vous devez être en utilisant une ancienne version de jQuery. Délégué a été ajouté dans 1.4.2. Si vous utilisez une version antérieure à la version 1.3, mais moins de la 1.4.2, vous pouvez utiliser live à la place: api.jquery.com/live. Ou vous pouvez mettre à niveau votre version de jQuery pour la dernière (1.4.3)
    yap, vous avez raison. J'ai été en utilisant 1.4, donc passé à google d'accueil. Merci !

    OriginalL'auteur Matt

  2. 3

    Si vous regardez la documentation pour les plus proches vous verrez qu'il dit qu'il trouve ancêtres ..

    Description: Obtenir le premier ancêtre
    élément qui correspond au sélecteur,
    début à l'élément en cours et
    progresse jusqu' par le biais de l'arborescence DOM.

    l'entrée dans votre cas n'est pas un ancêtre de la .delete lien.

    Vous avez besoin pour vous déplacer de haut avec .closest('tr') et ensuite de creuser pour trouver l'entrée avec .find('input')

    donc 

    var val = $(this).closest('tr').find('input').val();
    +1 - meilleure façon d'aller de l'OMI, démo ici: jsfiddle.net/nick_craver/HePja
    merci pour la démo 🙂

    OriginalL'auteur Gabriele Petrioli

  3. 0

    Essayer

    $('.delete').click(function (e) {
    e.preventDefault();
    var val = $(this).parent("td").prev().find('input').val();
    alert(val);
});

    OriginalL'auteur rahul

  4. 0

    Voir Le Travail De Démonstration

    Vous ne pouvez pas utiliser closest il y, essayez ceci:

     $('.delete').click(function(e){
    e.preventDefault();
    var val = $(this).parent('td').prev('td').find('input').attr('value');
    alert(val);
 });

    La parent() est utilisé pour revenir à la mère td du lien et ensuite prev() est utilisé pour trouver le frère précédent de td et enfin avec find méthode, input est recherché.

    Plus D'Infos:

    OriginalL'auteur Sarfraz