Блог

Главная - Вопросы по программированию - Как добавить числа в в массив только в том случае, если другой содержит определенный текст

Как добавить числа в в массив только в том случае, если другой содержит определенный текст

#javascript #html #jquery

Вопрос:

Я пытаюсь перенести некоторые числа, которые выводятся на мою таблицу из моей базы данных, в массив, чтобы я мог получить сумму этих чисел, а затем сравнить их с другим набором данных. Однако я хочу добавить цифры только там, где предыдущая <td> содержит текст «реализация». Так, например, в этом HTML-выводе меня интересуют итоговые <td> данные с классом , но я хочу добавить только те числа, в которых первый <td> , с фазой стоимости класса, содержит текст «реализация». Если вы посмотрите на последнее <tr> , <td> то в фазе с затратами на класс содержится текст «годовой». Я хочу исключить эти конкретные табличные данные, где число равно 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 с селектором :содержит и costPhase.text () = = = «реализация»
, но ни один из них, похоже, не работает. Метод .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);
        });

}

Если у кого-нибудь есть какие-либо советы о том, как этого достичь, мы будем очень признательны! Спасибо!

Ответ №1:

Для построения массива вы можете использовать map() итерацию по всем .costPhase элементам, содержащим слово 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>

Комментарии:

1. Если вы не возражаете, я спрошу, какова цель 10 после .replace()?

2. Это радиус анализируемого числа — developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Метки: ,