Selezionare primo fratello

Question

Sto cercando di selezionare il valore interno del primo fratello - utilizzando jQuery -. In un ambiente in cui non riesco a modificare il codice HTML

Ho il seguente:

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

Sto cercando di ottenere il valore del primo <td> con il seguente:

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

Tutto quello che ricevo da questo è null.

Ho provato varie combinazioni con con la funzione .siblings() troppo, ma senza alcun risultato.

Tutte le idee?

Grazie,

Nota: Ho dimenticato di dire che la tabella è l'estratto da viene caricato e rinfrescato da una chiamata AJAX in modo dinamico. Questo può essere pertinente per i suggerimenti che includono lega.

Soluzione: Sono andato con la seguente soluzione, ispirata alla risposta accettata:

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

e per il 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 ();

Questo selezionerà il primo elemento TD (: first-child filtro) nella TR genitore dell'immagine. parents() restituisce tutti i genitori dell'elemento, e noi filtrare i genitori in modo che solo gli elementi TR vengono restituiti.

Anche provare a scrivere la vostra immagine in questo modo:

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

e la funzione in questo modo:

function doSomething ( imgEl ) {
}

e utilizzare imgEl invece di this

Answer 2

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

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

});

Answer 3

Vorrei impostare un evento utilizzando jQuery, ma questo è totalmente a voi.

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

Non importa cosa, è ancora possibile utilizzare questo esempio con il proprio codice:

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

---

Hai ragione. 'Questo' non viene passata, è necessario modificare il codice HTML per fare quel lavoro. O semplicemente utilizzare jQuery invece come esposizione qui sopra.

Answer 4

Forse questo aiuterà qualcuno. Questa è solo una parte di tutto l'articolo qui .

La differenza

Se si desidera utilizzare questo per l'accesso l'elemento HTML che gestisce l'evento, è necessario assicurarsi che la parola chiave this viene effettivamente scritto nella proprietà onclick. Solo in questo caso ci si riferisce all'elemento HTML il gestore di eventi è registrato. Quindi, se si fa

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

si ottiene

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

Come si può vedere, la parola chiave this è presente nel metodo onclick. Pertanto si riferisce l'elemento HTML.

Ma se lo fai

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

si ottiene

function onclick()
{
    doSomething()
}

Questo è soltanto un riferimento operato doSomething (). La parola chiave this non è presente nel metodo onclick in modo che non si riferisce all'elemento HTML.

Answer 5

Abbiamo una riga della tabella in cui una colonna è l'azione, altre colonne contengono dati. Una delle colonne contiene il codice del prodotto (UPC). Quindi usiamo questa opzione per visualizzare il codice del prodotto ogni volta che qualcuno fa clic su un pulsante di azione:

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

Questo funziona perché le nostre celle della tabella hanno le classi, come ad esempio 1.919.191,911919 millions per ogni riga.

È possibile utilizzare altri selettori di jQuery, però. Come ad esempio .children ( '# myid') se si dispone di attributi ID SET sul cellulare 19.191.919,199191 millions, così come un numero qualsiasi di altri selettori come .children (td: in primo luogo). Per ottenere la prima cella sulla stessa riga