Как установить содержание элемента в значение его атрибута с помощью jQuery

Question

Это просто упражнение, о котором я думал во время игры с jsFiddle.

Указанные элементы с атрибутом данных:

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

Я хочу, чтобы установить содержание текста к результату функции с этим идентификатором, таким образом, что окончательное DOM является:

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

до сих пор я смог найти данный элемент и но каким-то образом не могу ссылаться на элемент, используя ключевое слово this, чтобы получить его testId:

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

getPersonName() возвращает «Джон Смит»

Я думаю, что это должно быть просто, но не нашел автореферентный пример, как это на стеке или JQuery документации.

EDIT: Исправлен элемент для отображения нескольких div, а не только один. (то есть идентификатор неизвестен и не должен находиться в селекторе). Исправлено выделение, чтобы иметь одинарные кавычки вокруг него.

Answer 1

this - это контекст функции.

Если ничего не указано, this просто window.

Что вы хотите, чтобы пройти обратный вызов $.text, который будет привязан к выбранному элементу DOM:

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

Answer 2

К сожалению, this ключевое слово не поможет вам сделать это в текущем контексте. Вам нужно будет использовать jQuery's each для обработки результатов запроса $(div[data-test-id]). Затем внутри обратного вызова, присвоенного каждому, значение this будет привязано к узлу DOM.

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

Мне было любопытно, насколько длинный чистый перевод javascript будет сравниваться с ответом moonwave99. Только в случае, если кто-то заинтересован в этом, а, вот оно:

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

jsfiddle

Answer 4

Это не обязательно используют методы итераций; .text() выполняет итерацию каждого элемента в селекторе, this уже является текущим элементом в функции .text(function(index, text){}).

Вы можете настроить getPersonName для подписи .text(), которая должна позволить вам использовать рисунка на

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