javascript - 我可以使用 nextUntil 来获取这些值吗？

Question

我想要.text或.val来自一些<td> <tr> 之间的 s类 .ccc并将其放入一个数组中。

<tr class="ccc">
   <td>Strategy & Performance</td>
   <td class="l_ccc_data" id="Foo~Q_1"></td> //the innerHTML of this should read 10
   <td class="l_ccc_data" id="Foo~Q_2"></td> //the innerHTML of this should read 12
</tr>
<tr class="inner">
   <td id="Bar~Q_1">5</td>
   <td id="Bar~Q_2">6</td>
</tr>
<tr class="inner">
   <td id="Something~Q_1">5</td>
   <td id="Something~Q_2">6</td>
</tr>
<tr class="ccc">
   <td>Central Engineering</td>
   <td class="l_ccc_data" id="Boo~Q_1">Next total Goes here</td>
   etc...

到目前为止我对脚本的了解:

$(document).ready(function(){
    $('.l_ccc_data').each(function(){
        var id = $(this).attr('id');
        var arr_id = id.split('~');
        var q = arr_id[1];
        var arr_sum = [];
        arr_sum.push($(this).nextUntil('.ccc', '[id$="+q+"]').html()); //this could be .text(), or .val(), not sure
        //then add up all the values in arr_sum and set
        //$(this).html(whatever the sum);
    });
});

我知道将数据编码到 ID 中是一个坏主意，目前还没有真正的帮助。我需要从任何 <td> 获取值以与我的 <td> 相同的 Q_1 或 Q_2 或其他内容结尾与类l_ccc_data 。然后我需要获取该数字，将其推送到数组中，将它们相加，并将其显示在该 <td> 的内部html中与类l_ccc_data 。一个简单的总计。不应该这么难，但我觉得我错过了一些东西。

这是 nextUntil 的正确用法吗？我做错了什么？

Answer 1

nextUntil 方法将仅查看下一个同级节点，而不查看可能具有不同父级的下一个节点。

因此，您需要在 DOM 树上向上一层，从当前 td 到父级 tr，然后应用 nextUntil。然后需要再往下走，可以使用find。

请注意，我也纠正了一些错误(例如 '[id$="+q+"]' 中的错误引用，这使得 + 不按照您的预期运行)。请注意，您不应使用 html() 来放置纯文本。使用 text() 来实现。

$(function(){
    $('.l_ccc_data').each(function(){
        var q = $(this).attr('id').split('~').pop();
        var sum = 0;
        $(this).parent().nextUntil('.ccc').find('[id$="'+q+'"]')
               .each(function () {
                    sum += +$(this).text();
               });
        $(this).text(sum);
    });
});