Bir öğenin içeriğini jQuery

Question

ile özniteliğinin değeri olarak nasıl ayarlanır Bu sadece jsFiddle ile oynarken düşündüğüm bir uygulamadır. Bir veri özniteliği ile

Verilen elemanlar:

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

:

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

O kimliği, nihai DOM böyle olması ile işlevin sonuçlanması metin içeriğini ayarlamak istediğiniz Şimdiye kadar verilen elementi bulmayı başardım ama bir şekilde elemanın testini almak için this anahtar sözcüğünü kullanamıyordum:

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

getPersonName() döner "John Smith"

bunun o kadar basit olması gerektiğini düşünüyorum, ama yığın veya jQuery dokümanlar üzerinde böyle kendine referans örnek bulamadık.

DÜZENLEME: Sabit öğe yalnızca bir tanesini değil, birden çok div göstermek için. (yani ID bilinmemektedir ve selektörde olmamalıdır). Çevresinde tek tırnak olması için sabit seçim.

Answer 1

this fonksiyonunun içeriğidir. hiçbir şey bundan başka belirtirse

, this basitçe window olduğunu. Ne istiyorsun

seçilen DOM öğesine bağlı olacağını, $.text bir geri arama geçmektir:

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

Answer 2

Maalesef this anahtar kelime mevcut bağlamda bunu yardımcı olmayacaktır. $(div[data-test-id]) sorgusunun sonuçları üzerinde döngü yapmak için jQuery's each kullanmanız gerekir. Daha sonra, her birine verilen geri aramada, this değeri DOM düğümüne bağlanır.

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

Saf javascript çevirisinin moonwave99'un cevabıyla ne kadar karşılaştırılacağını merak ettim. Her ihtimale karşı birisi işte burada, hem de bu ilgilenmektedir:

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

jsfiddle

Answer 4

Gerekli kullanım iterasyon yöntemleri değildir; .text() her bir elemanı seçicide tekrarlar, this zaten .text(function(index, text){}) fonksiyonunda mevcut elemandır.

Sen desenini kullanmaya izin vermelidir .text() imzasına getPersonName ayarlayabilirsiniz

$("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>