选择html直到我到达特定的课程

Question

我有一个像这样的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>

现在我想只选择html直到我达到＆＃39;总计＆＃39; class，所以我希望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（包括e1，e2行，我不想要的）

如果我得到了正确的html，（即直到d系列），我会对每个tr进行一次动作以得到一个特定的值（我的意思是我想要a1，b1，仅限c1和d1，而不是e1，所以我只在d系列上加上总课程。

任何人都可以帮助我只获得HTML直到＆＃39;总计＆＃39;

提前致谢...

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()，因为它没有探索父元素。}

您可以使用tr从返回的Array.from元素创建数组，并使用tr生成每个Array#map的外部HTML字符串数组。

_{请注意，IE11不支持Array.from。另一种方法是使用for循环迭代元素。}

最后，您可以使用Array#join加入他们。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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);

演示

＆＃13;

＆＃13;

/* 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');

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;