1

だから私は自分のページにこのhtmlを持っています:

<div class='item'>
    <h2><a href='http://www.mysite.com/1'>Link 1</a></h2>
    <p class='desc'>Text text text text</p>
</div>

<div class='item'>
    <h2><a href='http://www.mysite.com/2'>Link 2</a></h2>
    <p class='desc'>Text text text text</p>
</div>

<div class='item'>
    <h2><a href='http://www.mysite.com/3'>Link 3</a></h2>
    <p class='desc'>Text text text text</p>
</div>

兄弟の h2 タグからのリンクを使用して、段落の最後にリンクを追加したいと考えています。私はこのjQueryを持っています:

$('p.desc').append(' <a href="' + $(this).prev().find('a').attr('href') + '">More ></a>');

しかし、リンクは に設定されているだけundefinedです。ここで何が間違っていますか？

4

3 に答える 3

2

各要素に関連する値を取得してアンカータグを作成できるようにするには、操作を単純に連鎖させることはできません。特定の各段落をスコープして相対リンクを取得できるように、何らかの反復を行う必要があります。ほとんどの場合each、これに使用できますが、appendたまたま関数を引数としてサポートしているため、各要素に追加するものを返す必要があります。このコンテキスト内で、h2 のリンクが何であるかを解決し、新しいアンカーを返すことができます。

$('p.desc').append(function() { // loop through all p.desc and add something
    // within this function, $(this) is now the current p.desc
    var link = $(this).prev('h2').find('a').attr('href'); // get the path
    return $('<a/>').attr('href', link).text('More'); // return the new link
});

わざわざlink変数を作成する必要がないことは明らかです。私は長いコード行が嫌いで、何が起こっているのかを理解するのがはるかに簡単だと考えています。

于 2013-05-03T21:29:26.437 に答える
1 
$('.desc').append(function(
    return $(this).prev('h2').find('a').clone().text('More >');
});
于 2013-05-03T21:28:00.363 に答える
0

問題は の使用です$(this)。スコープを意図したとおりに適用していません。なぜなら、本質的にアンカー タグのないスコープをネストする append メソッドに引数として渡すためです。したがって、「未定義」という望ましくない結果が得られます。「each」を使用すると、使用している現在のコードにスコープを適切に割り当てることができます。次のように無名関数でラップするだけです。

$('p.desc').each(function(){
    // Your code here
});
于 2013-05-03T22:02:10.553 に答える