web-dev-qa-db-fra.com

Sélectionnez le premier frère

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

J'ai le suivant:

<tr>
    <td>3</td>
    <td>bob</td>
    <td>smith</td>
    <td>[email protected]</td>
    <td>
        <img src="bobsmith.png" onclick="doSomething()" />
    </td>
</tr>

J'essaie d'obtenir la valeur du premier <td> avec les éléments suivants:

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

Tout ce que je tire de ceci est null. 

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

Des idées?

Merci,

Remarque: / J'ai oublié de mentionner que la table dont provient l'extrait est chargée dynamiquement et actualisée à partir d'un appel ajax. Cela peut être pertinent pour les suggestions qui incluent des liens.

Solution: Je suis parti avec la solution suivante, inspirée de la réponse acceptée:

<tr>
    <td>3</td>
    <td>bob</td>
    <td>smith</td>
    <td>[email protected]</td>
    <td>
        <img src="bobsmith.png" onclick="doSomething(this)" />
    </td>
</tr>

et pour le javascript jQuery:

function startStopNode(el) {
    var temp = $(el).parent().siblings(':first').html();
    alert("you clicked: " + temp);
}
jqueryhtmldomsiblingsjquery-1.3.2
22
Mike
$( 'td:first-child', $( this ).parents ( 'tr' ) ).html ();

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

Essayez également d’écrire votre image comme suit:

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

et votre fonction comme suit:

function doSomething ( imgEl ) {
}

et utilisez imgEl au lieu de this

17
Jan Hančič

Je voudrais organiser un événement en utilisant jQuery, mais c'est tout à vous de décider.

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

Quoi qu'il en soit, 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);
}

Tu as raison. 'this' n'est pas transmis, vous devez modifier le code HTML pour que cela fonctionne. Ou utilisez simplement jQuery à la place, comme indiqué ci-dessus.

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

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

});
2
Reigel

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

La différence

Si vous souhaitez utiliser cela pour accéder à l'élément HTML qui gère l'événement, vous devez vous assurer que le mot clé this est réellement écrit dans la propriété onclick. Ce n'est que dans ce cas qu'il fait référence à l'élément HTML auquel le gestionnaire d'événements est inscrit. Donc si tu le fais

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

vous recevez

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

Comme vous pouvez le constater, le mot-clé this est présent dans la méthode onclick. Par conséquent, il fait référence à l'élément HTML.

Mais si vous le faites

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

vous recevez

function onclick()
{
    doSomething()
}

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

0
Reigel

Nous avons une ligne de table où une colonne est l'action, d'autres colonnes contiennent des données. Une des colonnes contient le code produit (UPC). Nous utilisons donc ceci pour afficher le code du 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 car nos cellules de table ont des classes, telles que 1919191911919 pour chaque ligne.

Vous pouvez cependant utiliser d'autres sélecteurs de jQuery. Tels que .children ('# myid') si vous avez des attributs id définis sur la cellule 19191919199191 ainsi qu'un nombre quelconque d'autres sélecteurs comme .children (td: first) pour obtenir la première cellule de la même ligne.

0
Lance Cleveland