2012-01-11 11 views
0

jqueryのnoobです。立ち往生して助けていただければ幸いです。 現在、特定のページからデータを取得するツールを構築しています。ページには、次のようになります。以下はjqueryはidに基づいて要素を一致させます

<table width="100%" border="0" align="center" cellpadding="3" cellspacing="1"> 
<tbody> //This is data group 1  
    <tr id="parent0"> //Record 1 
    <td align="left"> <---------- text1 here -------> </td> 
    <td align="left"> <---------- text2 here -------> </td> 
    <td align="left"> <---------- text3 here -------> </td> 
    </tr>  
    <tr id="parent0"> //Record 2 
    <td align="left"> <---------- text1 here -------> </td> 
    <td align="left"> <---------- text2 here -------> </td> 
    <td align="left"> <---------- text3 here -------> </td> 
    </tr>  
</tbody> 
</table> 

<table width="100%" border="0" align="center" cellpadding="3" cellspacing="1"> 
<tbody> //This is data group 2  
    <tr id="child0"> //Record 1 
    <td align="left"> <---------- text1 here -------> </td> 
    <td align="left"> <---------- text2 here -------> </td> 
    <td align="left"> <---------- text3 here -------> </td> 
    </tr>  
    <tr id="child0"> //Record 2 
    <td align="left"> <---------- text1 here -------> </td> 
    <td align="left"> <---------- text2 here -------> </td> 
    <td align="left"> <---------- text3 here -------> </td> 
    </tr>  
</tbody> 
</table> 

のjqueryの抜粋です:

ancestor = $(this).closest("tr[id]"); 

    matchedElement = $(this).first(); 
    originalBgColor = $(matchedElement).css('background-color'); 
    $(matchedElement).css('background-color', 'green'); 
    $(matchedElement).bind('click.annotator', function(event) { 
    event.stopPropagation(); 
    event.preventDefault(); 
    self.port.emit('show', 
     [ 
     document.location.toString(), 
     $(ancestor).attr("child0"), 
     $(matchedElement).text() 
     ] 

私はIDの親0、およびchild0でちょうど<tr>ブロックからすべてのデータをキャプチャしようとしています。

ツールは、現在の動作状態では、2つのテーブル内のすべてのデータをテキストとしてキャプチャします。理想的には、すべての<TR>ブロックを別々にキャプチャし、それを配列に入れて反復処理できるようにしたいと考えています。

+3

ID値が一意である必要があり、あなたは現在、複数の要素に同じIDを割り当てています。 – Paul

+2

複数のIDを複数回使用しないでください:http://www.w3.org/TR/html4/struct/global.html#h-7.5.2 –

答えて

0
$('tr[id="child0"]').each(function() { 
         //this will be fired for each matched element 
         $(this).doSomething(); 
         } 
        ); 

ようにあなたがより多くの参照http://api.jquery.com/category/selectors/

+0

ありがとうございます!それは私の問題を理解するのを助けました。 – spex2004

2

クラスを使用する必要があるID要素を使用しているようです。代わりに

<tr id="child0"> 
<tr id="parent0"> 

が、これは

<tr class="child0"> 
<tr class="parent0"> 

IDとは異なり、あなたはクラス属性を持つ複数の要素に同じ値を割り当てることができません。

次に、あなたがこの

$("tr.child0,tr.parent0").each(
          function() { 
          //this will be fired for each matched element 
          $(this).doSomething(); 
          } 
         ) 
0

のID child0 チェックは、このリンクですべてのTRを取得します。この方法は、それらすべてを選択することができるようにDO ..

$('cite.fn:contains(blabla)').css('color', 'red'); 

編集:「blablablabla」と「wel」が一致しますl。

$('cite.fn').each(function() { 
    if ($(this).text() == 'blabla') { 
     $(this).css('color', 'red'); 
    } 
}); 

これはより正確であるはずです。

編集:実は、私は、このソリューションは、よりエレガントだと思う:

$('cite.fn').filter(function() { 
    return $(this).text() == 'blabla'; 
}).css('color', 'red');; 
関連する問題