テーブル行があります
<tr class="b_row">
<td>
<div class="cpt">
<h2>
<a href="/ref/ref/1.html">example</a>
</h2>
</div>
</td>
</tr>
<!--more elements -->
<tr class="b_row">
<td>
<div class="cpt">
<h2>
<a href="/ref/two/23.html">example N</a>
</h2>
</div>
</td>
</tr>
属性でハイパーリンクを取得する必要があります。このスクリプトを使用します
function openAll()
{
$("tr.b_row").each(function(){
var a_href = $('div.cpt').find('h2 a').attr('href');
alert ("Href is: " + a_href);
}
問題:変数a_href
は常に/ ref/ref/1.htmlです
ループでは、現在の処理済み要素を参照する必要があるため、次のように記述します。
var a_href = $(this).find('div.cpt h2 a').attr('href');
var a_href = $('div.cpt').find('h2 a').attr('href');
あるべき
var a_href = $(this).find('div.cpt').find('h2 a').attr('href');
最初の行では、クエリはドキュメント全体を検索します。 2番目では、クエリはtr
要素から始まり、その下の要素のみを取得します。 (必要に応じてfind
sを組み合わせることができますが、ポイントを説明するために別々に残しました。)
非常に簡単に、コンテキストとしてthis
を使用します。 http://api.jquery.com/jQuery/#selector-context
var a_href = $('div.cpt', this).find('h2 a').attr('href');
つまり、'div.cpt'
this
内のみ
これを使って:
$(function(){
$("tr.b_row").each(function(){
var a_href = $(this).find('div.cpt h2 a').attr('href');
alert ("Href is: "+a_href);
});
});
実際のデモをご覧ください:http://jsfiddle.net/usmanhalalit/4Ea4k/1/
b_row
を参照するthis
への参照を追加します。
$("tr.b_row").each(function(){
var a_href = $( this ).find('div.cpt h2 a').attr('href');
alert ("Href is: "+a_href);
});
Desire要素を取得するには、$(this)
を使用します。
function openAll()
{
$("tr.b_row").each(function(){
var a_href = $(this).find('.cpt h2 a').attr('href');
alert ("Href is: "+a_href);
});
}