使用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>');

但'这个'似乎不起作用。为什么？我该怎么做呢？

Answer 1

我认为尝试以下内容可能会更容易：

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

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

希望这有所帮助。

Answer 2

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

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

Answer 3

this仅评估一次（每次输入相关代码时），因此不能同时为<div...foo>和<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]'))
});