Wie man den Inhalt eines Elements auf den Wert seines Attributs mit jQuery setzt

Question

Dies ist nur eine Übung, an die ich beim Spielen mit jsFiddle gedacht habe.

Da Elemente mit einem Datenattribut:

<div data-test-id="3214581">Loading...</div> <div data-test-id="6584634">Loading...</div>

Ich möchte den Textinhalt setzen von Funktion mit dieser ID, so zu führen, dass die endgültige DOM ist:

<div data-test-id="3214581">John, Smith</div>

Bisher konnte ich das gegebene Element finden und irgendwie kann ich mich nicht auf das Element beziehen, das this Schlüsselwort verwendet, um seine testId zu erhalten:

$('div[data-test-id]').text(getPersonName($(this).data('testId')))

getPersonName() gibt „John Smith“

denke ich, es so einfach sein sollte, haben aber keine sich selbst verweis Beispiel wie diese auf Stapel oder jQuery docs gefunden.

EDIT: Fester Element, um mehrere divs, nicht nur eine zu zeigen. (d. h. die ID ist nicht bekannt und sollte nicht im Selektor sein). Behebt die Auswahl, um einzelne Anführungszeichen zu haben.

Answer 1

this ist der Kontext der Funktion.

Wenn nichts weiter spezifiziert, this ist einfach window.

Was Sie wollen, ist ein Rückruf zu $.text passieren, dass auf das ausgewählte DOM-Element gebunden werden:

$('div[data-test-id]').text(function(){ 
    // here this is your div 
    return getPersonName($(this).data('testId')) 
}) 

Answer 2

Leider ist das this Schlüsselwort wird dir nicht helfen dies im aktuellen Kontext zu tun. Sie müssen jQuerys each verwenden, um die Ergebnisse der $(div[data-test-id])-Abfrage zu durchlaufen. Innerhalb des Rückrufs, der jedem gegeben wird, wird dann der Wert this an den DOM-Knoten gebunden.

// "this" in this scope is not the DOM element 
$(div[data-test-id]).each(function() { 
    // "this" inside this scope is bound to the DOM element 
    $(this).text(getPersonName($(this).data('testId'))); 
}); 

Answer 3

Ich wurde neugierig, wie viel länger eine reine Javascript-Übersetzung mit der Antwort von moonwave99 verglichen würde. Für den Fall, jemand ist in diesem wie auch interessiert, hier ist sie:

[].forEach.call(document.querySelectorAll("div[data-test-id]"),function(el){ 
    el.innerHTML=getPersonName(el.getAttribute("data-test-id")); 
}); 

jsfiddle

Answer 4

Es ist nicht notwendig Verwendung Iterationsverfahren; .text() iteriert jedes Element am Selektor, this ist bereits aktuelles Element innerhalb der Funktion .text(function(index, text){}).

Sie getPersonName zur Unterzeichnung von .text() einstellen, die Sie Muster verwenden

$("div[data-test-id]").text(getPersonName); 

---

var names = { 
 
    3214581: "John, Smith", 
 
    6584634: "Stack, Overflow" 
 
} 
 

 
function getPersonName(index, text) {  
 
    return names[$(this).data().testId] 
 
} 
 

 
$("div[data-test-id]").text(getPersonName);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div data-test-id="3214581">Loading...</div> 
 
<div data-test-id="6584634">Loading...</div>