jquery - 用jquery在元素集中的每个元素之前插入属性值？

Question

我想用jquery来转换

<div data-expand-label="foo" />
<div data-expand-label="bar" />

进入

<p>foo</p>
<div data-expand-label="foo" />
<p>bar</p>
<div data-expand-label="bar" />

这是我认为可行的：

$('[data-expand-label]').before('<p>'+$(this).attr('[data-expand-label]')+'</p>');

但“这”似乎不起作用。为什么？而我应该怎么做？

score 1 · Accepted Answer

我认为尝试以下方法可能更容易：

$(document).ready(function() {
    $('[data-expand-label]').each(function() { $(this).before('<p>'+$(this).attr('data-expand-label')+'</p>'); });
});

我不相信您可以在您所处的上下文中使用“$（this）”，它需要以上述方式引用。

希望这有帮助。

score 0 · Accepted Answer

您需要遍历要应用新元素的每个元素，如下所示：

$('div[data-expand-label]').each(function() {
    $(this).before($('<p></p>').html($(this).attr('data-expand-label')));
});

score 0 · Accepted Answer

this只评估一次（每次输入有问题的代码），所以它不能同时是<div...foo>and <div...bar>。您将需要遍历元素。

.before接受一个回调参数，它会很高兴地为您迭代。但是，您确实需要提供回调。改变：

$('[data-expand-label]').before(
  '<p>'+$(this).attr('[data-expand-label]')+'</p>'
);

（您的代码）到：

$('[data-expand-label]').before(function(){
  return '<p>'+$(this).attr('[data-expand-label]')+'</p>'
});

或者，更好的是，如果data-expand-label应该是文本，

$('[data-expand-label]').before(function(){
  return $('<p>').text($(this).attr('[data-expand-label]'))
});

3 回答 3