Sélectionnez le premier frère

Question

J'essaie de sélectionner la valeur interne du premier frère - en utilisant jQuery - dans un environnement où je ne peux pas modifier le balisage html.

Je donne les résultats suivants:

<tr> 
    <td>3</td> 
    <td>bob</td> 
    <td>smith</td> 
    <td>bob@example.com</td> 
    <td> 
     <img src="bobsmith.png" onclick="doSomething()" /> 
    </td> 
</tr> 

J'essaie d'obtenir la valeur de la première <td> ce qui suit:

function doSomething() { 
    var temp = $(this).parent().parent().children().filter(':first'); 
    alert("you clicked person #" + temp.html()); 
} 

Tout ce que je reçois de c'est null.

J'ai aussi essayé différentes combinaisons avec la fonction .siblings(), mais en vain.

Des idées?

Merci,

Note: J'ai oublié de mentionner que la table l'extrait est de chargement dynamique & rafraîchi à partir d'un appel ajax. Cela peut être pertinent pour les suggestions qui incluent des liaisons.

Solution: Je suis allé avec la solution suivante, inspirée par la réponse acceptée:

<tr> 
    <td>3</td> 
    <td>bob</td> 
    <td>smith</td> 
    <td>bob@example.com</td> 
    <td> 
     <img src="bobsmith.png" onclick="doSomething(this)" /> 
    </td> 
</tr> 

et le javascript jQuery:

function startStopNode(el) { 
    var temp = $(el).parent().siblings(':first').html(); 
    alert("you clicked: " + temp); 
} 

Answer 1

$('td:first-child', $(this).parents ('tr')).html(); 

Cette sélectionnera le premier élément TD (: premier filtre enfant) dans le TR parent de image. parents() renvoie tous les parents de l'élément, et nous filtrons les parents afin que seuls les éléments TR soient renvoyés.

Essayez aussi écrire votre image comme ceci:

<img src="bobsmith.png" onclick="doSomething(this)" /> 

et votre fonction comme ceci:

function doSomething (imgEl) { 
} 

et utiliser imgEl au lieu de this

Answer 2

$('tr td:last-child img').click(function(){ 

    alert($('td:first-child',$(this).closest('tr')).text()); 

}); 

Answer 3

Je mis en place un événement en utilisant jQuery, mais c'est totalement à vous.

$("table td:last img").click(function() { 
    var firstTd = $(this).parents("tr").find("td:first").html(); 
    alert("you clicked person #" + firstTd); 
}); 

Peu importe, vous pouvez toujours utiliser cet exemple avec votre propre code:

function doSomething() 
{ 
    var firstTd = $(this).parents("tr").find("td:first-child").html(); 
    alert("you clicked person #" + firstTd); 
} 

---

Vous avez raison. 'ceci' n'est pas passé, vous devez éditer le code HTML pour que cela fonctionne. Ou utilisez juste jQuery à la place comme montré ci-dessus.

Answer 4

peut-être que cela aidera quelqu'un. Ceci est juste une partie de l'article entier here.

La différence

Si vous voulez utiliser pour accéder à l'élément HTML qui gère l'événement, vous devez vous assurer que le ce mot-clé est en fait écrit dans la propriété onclick. Ce n'est que dans ce cas qu'il fait référence à l'élément HTML dans lequel le gestionnaire d'événements est enregistré. Donc, si vous faites

element.onclick = doSomething; 
alert(element.onclick) 

vous

function doSomething() 
{ 
    this.style.color = '#cc0000'; 
} 

Comme vous pouvez le voir, le mot-clé est ce présent dans la méthode onclick. Par conséquent, il se réfère à l'élément HTML.

Mais si vous

<element onclick="doSomething()"> 
alert(element.onclick) 

vous obtenez

function onclick() 
{ 
    doSomething() 
} 

Ceci est simplement une référence à la fonction doSomething(). Le mot-clé this n'est pas présent dans la méthode onclick, donc il ne fait pas référence à l'élément HTML.

Answer 5

Nous avons une ligne de table où une colonne est l'action, les autres colonnes contiennent des données. L'une des colonnes contient le code de produit (UPC). Nous utilisons donc cette option pour afficher le code produit chaque fois que quelqu'un clique sur un bouton d'action:

var product_code = jQuery(obj).parents('tr').children('.upc').text(); 
alert('product code'+product_code); 

Cela fonctionne parce que nos cellules de table ont des classes, comme 1919191911919 pour chaque ligne.

Toutefois, vous pouvez utiliser d'autres sélecteurs de jQuery. Comme .children ('# myid') si vous avez des attributs id définis sur la cellule 19191919199191 ainsi que n'importe quel nombre d'autres sélecteurs comme .children (td: first) pour obtenir la première cellule sur la même ligne.