Question

这只是我在玩jsFiddle时想到的一个练习。

给定具有数据属性的元素：

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

我想将文本内容设置为具有该ID的函数结果，以便最终DOM为：

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

到目前为止，我能够找到给定的元素，但不知何故可以使用this关键字引用该元素来获取其testId：

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

getPersonName（）返回＆＃34; John，Smith＆＃34;

我认为它应该很简单，但是在堆栈或jQuery文档上找不到像这样的自引用示例。

编辑：固定元素以显示多个div，而不仅仅是一个。（即该ID未知且不应该在选择器中）。修复了选择周围有单引号。

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

如何使用jQuery将元素的内容设置为其属性的值

4 个答案: