HTMLを選択私は特定のクラス

Question

に達するまで、私はこのようなHTMLいる：今、私は「総」クラスに達するまで、HTMLのみを選択するように

<table> 
<tr> 
<td>a1</td> 
<td>a2</td> 

</tr> 

<tr> 
<td>b1</td> 
<td>b2</td> 

</tr> 


<tr> 
<td>c1</td> 
<td>c2</td> 

</tr> 

<tr class="total"> 
<td>d1</td> 
<td>d2</td> 

</tr> 

<tr> 
<td>e1</td> 
<td>e2</td> 

</tr> 





</table> 

をしたいので、私はjqueryのは、選択したいHMTLがあります：私はこれを試してみました

<tr> 
<td>a1</td> 
<td>a2</td> 

</tr> 

<tr> 
<td>b1</td> 
<td>b2</td> 

</tr> 


<tr> 
<td>c1</td> 
<td>c2</td> 

</tr> 

<tr class="total"> 
<td>d1</td> 
<td>d2</td> 

</tr> 

コードはでした：

console.log($("table .total").parentsUntil("table").html()); 

が、これはすべてのTRの（つまり私はWAいけないE1、E2行、を含む、あるを与えますnt）

もし私が正しいhtmlを得ていれば（すなわち、dシリーズまで）、私はtrのそれぞれに対してperticular値を得るためのアクションを実行するでしょう（ex1 iはa1、b1、c1 、d1のみ、e1ではないので、私はdシリーズにのみ合計クラスを置く）。

誰も私が「総計」までHTMLのみを取得するのを助けることができますか？

ありがとうございます...

Answer 1

私はこれがあなたの目的に役立つと思います！

var neededHTML = ""; 
var allHTML = ""; 
$('table tr').each(function(){ 
    allHTML += $(this).get(0).outerHTML; 
    if ($(this).hasClass('total')){ 
     neededHTML = allHTML; 
    } 
}) 
console.log(neededHTML); 

Answer 2

あなたは正しい方向にあります。 $("table tr.total").prevUntil("table")実際には、選択したtr要素の前に、<tr>個の要素のセットがあります。

_{$("table tr.total").prevAll()は、親要素を探索しないため、これにも使用できます。}

あなたがArray.fromを使用して返さtr要素から配列を作成し、Array#mapを使用して、各trの外側のHTML文字列の配列を生成することができます。

_{Array.fromはIE11ではサポートされていません。代わりに、forループを使用して要素を反復することもできます。}

最後に、Array#joinを使用して参加できます。

console.log($("table tr.total").prevUntil("table")); 
 
console.log(
 
    Array.from(
 
    $("table tr.total").prevAll() 
 
).map(t => t.outerHTML).join("") 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>a1</td> 
 
    <td>a2</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>b1</td> 
 
    <td>b2</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>c1</td> 
 
    <td>c2</td> 
 
    </tr> 
 

 
    <tr class="total"> 
 
    <td>d1</td> 
 
    <td>d2</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>e1</td> 
 
    <td>e2</td> 
 
    </tr> 
 
</table>

Answer 3

以下のコードは、あなたが得られます。

除外されているものを設立

"0": <tr>…</tr> 
"1": <tr>…</tr> 
"2": <tr>…</tr> 

console.log($("tr.total").prevUntil("table", "tr"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>a1</td> 
 
    <td>a2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>b1</td> 
 
    <td>b2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>c1</td> 
 
    <td>c2</td> 
 
    </tr> 
 
    <tr class="total"> 
 
    <td>d1</td> 
 
    <td>d2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>e1</td> 
 
    <td>e2</td> 
 
    </tr> 
 
</table>

Answer 4

を：

var exc = $('.total').nextAll('tr').add('.total'); 

ではなくのすべてを収集します。

var inc = $('tr').not(exc); 

デモ

/* Get All <tr> after `.total` and add `.total` 
 
|| as well 
 
*/ 
 
var exc = $('.total').nextAll('tr').add('.total'); 
 

 
/* Get all <tr> but not the <tr> in the exc var */ 
 
var inc = $('tr').not(exc); 
 

 
// Just to demonstarte that it worked 
 
inc.css('background', 'cyan');

table, 
 
td { 
 
    border: 1px solid #000 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>a1</td> 
 
    <td>a2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>b1</td> 
 
    <td>b2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>c1</td> 
 
    <td>c2</td> 
 
    </tr> 
 
    <tr class="total"> 
 
    <td>d1</td> 
 
    <td>d2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>e1</td> 
 
    <td>e2</td> 
 
    </tr> 
 
</table>