javascript - 仅当另一个包含某些文本时，如何将数字添加到数组中

Question

我正在尝试将一些输出到我的表中的数字从我的数据库推送到一个数组，这样我就可以获得这些数字的总和，然后将它们与一组不同的数据进行比较。但是，我只想在前面<td>包含文本“实现”的地方添加数字。例如，在这个 HTML 输出中，我对<td>sumCosts 类感兴趣，但我只想添加第一个<td>带有类 costPhase 的具有“实现”文本的数字。如果您查看最后一个<tr>，<td>带有类 costPhase 的包含文本“年度”。我想从我的数组中省略数字为 313 的特定表数据。

<table class="table text-light">
                                <thead>
                                    <tr class="text-end">
                                        <th class="text-start" scope="col">Implementation or Annual</th>
                                        <th class="text-start" scope="col">Category</th>
                                        <th scope="col">Cost ($)</th>
                                        <th scope="col">Hours</th>
                                        <th scope="col">Edit</th>
                                        <th scope="col">Delete</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="text-end">
                                        ***<td class="text-start costPhase">implementation</td>***
                                        <td class="text-start">emo</td>
                                        ***<td class="text-end sumCosts commas">4,091</td>***
                                        <td class="text-end">85</td>
                                        <td>
                                            <a href="/find/costs_hours/1">
                                                <button id="1" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
                                            </a>
                                        </td>
                                        <td>
                                            <a class="deleteId" href="/delete/costs_hours/1">
                                                <button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr class="text-end">
                                        ***<td class="text-start costPhase">implementation</td>***
                                        <td class="text-start">analysts</td>
                                        ***<td class="text-end sumCosts commas">6,282</td>***
                                        <td class="text-end">130.5</td>
                                        <td>
                                            <a href="/find/costs_hours/2">
                                                <button id="2" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
                                            </a>
                                        </td>
                                        <td>
                                            <a class="deleteId" href="/delete/costs_hours/2">
                                                <button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr class="text-end">
                                        ***<td class="text-start costPhase">implementation</td>***
                                        <td class="text-start">maintenance</td>
                                        ***<td class="text-end sumCosts commas">2,873</td>***
                                        <td class="text-end">72.5</td>
                                        <td>
                                            <a href="/find/costs_hours/3">
                                                <button id="3" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
                                            </a>
                                        </td>
                                        <td>
                                            <a class="deleteId" href="/delete/costs_hours/3">
                                                <button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr class="text-end">
                                        ***<td class="text-start costPhase">implementation</td>***
                                        <td class="text-start">materials</td>
                                        ***<td class="text-end sumCosts commas">1,185</td>***
                                        <td class="text-end"></td>
                                        <td>
                                            <a href="/find/costs_hours/4">
                                                <button id="4" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
                                            </a>
                                        </td>
                                        <td>
                                            <a class="deleteId" href="/delete/costs_hours/4">
                                                <button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr class="text-end">
                                        ***<td class="text-start costPhase">annual</td>***
                                        <td class="text-start">emo</td>
                                        ***<td class="text-end sumCosts commas">313</td>***
                                        <td class="text-end"></td>
                                        <td>
                                            <a href="/find/costs_hours/5">
                                                <button id="5" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
                                            </a>
                                        </td>
                                        <td>
                                            <a class="deleteId" href="/delete/costs_hours/5">
                                                <button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
                                            </a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

这是我当前设置的功能。现在它使用 sumCosts 类获取所有值

let costsArray = [];

$(".sumCosts").each(function () {
            let values = parseInt($(this).text().replace(/,/g, ''));
            costsArray.push(values);
        });

console.log(costsArray)

这是记录到控制台的内容。（试图省略 313）

(5) [4091, 6282, 2873, 1185, 313]
0: 4091
1: 6282
2: 2873
3: 1185
4: 313
length: 5
__proto__: Array(0)

我尝试使用带有选择器的 if 块 :contains 和 costPhase.text() === 'implementation' 但这些似乎都不起作用。.text() 方法记录一个空数组， :contains 选择器记录与原始函数相同的输出。

if ($('.costPhase').text() === 'implementation') {
$(".sumCosts").each(function () {
            let values = parseInt($(this).text().replace(/,/g, ''));
            costsArray.push(values);
        });

}

if ($('.costPhase:contains("implementation")')) {
$(".sumCosts").each(function () {
            let values = parseInt($(this).text().replace(/,/g, ''));
            costsArray.push(values);
        });

}

如果有人对如何实现这一目标有任何建议，将不胜感激！谢谢！

标签： javascripthtmljquery

Answer 1

要构建数组，您可以使用它map()来遍历.costPhase包含 word 的所有元素implementation。从那里您可以检索同级.sumCosts并将其值添加到数组中。

要获取结果数组中的值的总和，您可以使用reduce().

尝试这个：

let values = $('.costPhase:contains("implementation")').map((i, el) => parseInt($(el).siblings('.sumCosts').text().trim().replace(/,/g, ''), 10)).get();
let total = values.reduce((a, b) => a + b, 0);

console.log(values);
console.log(total);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table text-light">
  <thead>
    <tr class="text-end">
      <th class="text-start" scope="col">Implementation or Annual</th>
      <th class="text-start" scope="col">Category</th>
      <th scope="col">Cost ($)</th>
      <th scope="col">Hours</th>
      <th scope="col">Edit</th>
      <th scope="col">Delete</th>
    </tr>
  </thead>
  <tbody>
    <tr class="text-end">
      <td class="text-start costPhase">implementation</td>
      <td class="text-start">emo</td>
      <td class="text-end sumCosts commas">4,091</td>
      <td class="text-end">85</td>
      <td>
        <a href="/find/costs_hours/1">
          <button id="1" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
        </a>
      </td>
      <td>
        <a class="deleteId" href="/delete/costs_hours/1">
          <button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
        </a>
      </td>
    </tr>
    <tr class="text-end">
      <td class="text-start costPhase">implementation</td>
      <td class="text-start">analysts</td>
      <td class="text-end sumCosts commas">6,282</td>
      <td class="text-end">130.5</td>
      <td>
        <a href="/find/costs_hours/2">
          <button id="2" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
        </a>
      </td>
      <td>
        <a class="deleteId" href="/delete/costs_hours/2">
          <button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
        </a>
      </td>
    </tr>
    <tr class="text-end">
      <td class="text-start costPhase">implementation</td>
      <td class="text-start">maintenance</td>
      <td class="text-end sumCosts commas">2,873</td>
      <td class="text-end">72.5</td>
      <td>
        <a href="/find/costs_hours/3">
          <button id="3" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
        </a>
      </td>
      <td>
        <a class="deleteId" href="/delete/costs_hours/3">
          <button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
        </a>
      </td>
    </tr>
    <tr class="text-end">
      <td class="text-start costPhase">implementation</td>
      <td class="text-start">materials</td>
      <td class="text-end sumCosts commas">1,185</td>
      <td class="text-end"></td>
      <td>
        <a href="/find/costs_hours/4">
          <button id="4" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
        </a>
      </td>
      <td>
        <a class="deleteId" href="/delete/costs_hours/4">
          <button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
        </a>
      </td>
    </tr>
    <tr class="text-end">
      <td class="text-start costPhase">annual</td>
      <td class="text-start">emo</td>
      <td class="text-end sumCosts commas">313</td>
      <td class="text-end"></td>
      <td>
        <a href="/find/costs_hours/5">
          <button id="5" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
        </a>
      </td>
      <td>
        <a class="deleteId" href="/delete/costs_hours/5">
          <button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
        </a>
      </td>
    </tr>
  </tbody>
</table>