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>は (問題のコードを入力するごとに) 1 回だけ評価されるため、との両方にすることはできません<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