Как я могу создать и массив и отфильтровать отрицательные числа

Question

Цель здесь состоит в том, чтобы перебрать все контейнеры ".test", создать массив. Найдите контейнер «.number-container», возьмите его отрицательное число и поместите в массив. поэтому я бы тогда имел массив = [1,5, -27,32]. Тогда целью было отфильтровать их.

Лучшее, что я могу придумать, это просто создать массив, у меня возникают проблемы при попытке перейти к следующим шагам.

<div class="test"> 
    <h2>main container</h2>
    <p> some sample text</p>
    <div class=".number-container">
    <p> this number is 1</p>
    </div>
</div>

<div class="test"> 
    <h2>main container</h2>
    <p> some sample text</p>
    <div class=".number-container">
    <p> this number is 5</p>
    </div>
</div>

<div class="test"> 
    <h2>main container</h2>
    <p> some sample text</p>
    <div class=".number-container">
    <p> this number is -32</p>
    </div>
</div>

<div class="test"> 
    <h2>main container</h2>
    <p> some sample text</p>
    <div class=".number-container">
    <p> this number is -27</p>
    </div>
</div>

Javacript:

$(".test").each(function(i){
      $(".test").text();
      return $(".number-container").filter(function(value) {
        return value < 0;
      });
    });

Answer 1

Чтобы сделать в jQuery способ, необходимо изменить имя класса на class = "number-container" (удалить ".")

<div class="test">
    <h2>main container</h2>
    <p> some sample text</p>
    <div class="number-container">
        <p> this number is 1</p>
    </div>
</div>

<div class="test">
    <h2>main container</h2>
    <p> some sample text</p>
    <div class="number-container">
        <p> this number is 5</p>
    </div>
</div>

<div class="test">
    <h2>main container</h2>
    <p> some sample text</p>
    <div class="number-container">
        <p> this number is -32</p>
    </div>
</div>

<div class="test">
    <h2>main container</h2>
    <p> some sample text</p>
    <div class="number-container">
        <p> this number is -27</p>
    </div>
</div>

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

   $(document).ready(function(){
        var nonNegativeArray = [];
         $(".number-container").each(function(index,element){
             var p = $(element).children().first();
             var amount = parseInt(p.html().split(' ').pop());
             if (amount > 0){ // will push amount only greater than 0 ( non negative)
                 nonNegativeArray.push(amount);
             }
        });
       console.log(nonNegativeArray); 

    })

Answer 2

Это должно сработать.

Я получаю все соответствующие узлы, используя document.querySelectorAll('.number-container').

Затем я перебираю петлю и получаю textContent каждого элемента.Обрезка удаляет все ненужные пробелы.

Затем я извлекаю последнюю непробельную коллекцию символов в тексте, пропускает ее через parseFloat и помещает ее в список значений.

var values = [];
document.querySelectorAll('.number-container').forEach(function(value) {
  var txt = value.textContent.trim();
  values.push(parseFloat(txt.substr(txt.search(/\S+$/igm))));
});
console.log(values);

<div class="test">
  <h2>main container</h2>
  <p> some sample text</p>
  <div class="number-container">
    <p> this number is 1</p>
  </div>
</div>

<div class="test">
  <h2>main container</h2>
  <p> some sample text</p>
  <div class="number-container">
    <p> this number is 5</p>
  </div>
</div>

<div class="test">
  <h2>main container</h2>
  <p> some sample text</p>
  <div class="number-container">
    <p> this number is -32</p>
  </div>
</div>

<div class="test">
  <h2>main container</h2>
  <p> some sample text</p>
  <div class="number-container">
    <p> this number is -27</p>
  </div>
</div>

Answer 3

Фактически для каждого повторяющегося элемента вам нужно найти значения p, содержащие .find(".number-container p").

Затем вам нужно получить значения внутри ".number-container p" с .text() вместо использования только параметра value обратного вызова $(".number-container").filter, который будет содержать объект JQuery DOM.

$(".test").each(function(i) {
    let value = $(this).find(".number-container p").text();

    if (value.indexOf("-") == -1) {
      $(this).hide();
    }
});

Примечание:

• Поскольку полученные значения являются strings, а не числами, вы проверяете наличие отрицательных значений с помощью value.indexOf("-").
• Вам нужно удалить начальный . из имен классов в class=".number-container".

Демо-версия:

Это демонстрационная программа, показывающая только прагменты с отрицательными значениями при нажатии кнопки:

$("#checkForNegativeNumbers").click(function() {
  $(".test").each(function(i) {
    let value = $(this).find(".number-container p").text();

    if (value.indexOf("-") == -1) {
      $(this).hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="checkForNegativeNumbers"> check For Negative Numbers</button>
<br />
<div class="test">
  <h2>main container</h2>
  <p> some sample text</p>
  <div class="number-container">
    <p> this number is 1</p>
  </div>
</div>

<div class="test">
  <h2>main container</h2>
  <p> some sample text</p>
  <div class="number-container">
    <p> this number is 5</p>
  </div>
</div>

<div class="test">
  <h2>main container</h2>
  <p> some sample text</p>
  <div class="number-container">
    <p> this number is -32</p>
  </div>
</div>

<div class="test">
  <h2>main container</h2>
  <p> some sample text</p>
  <div class="number-container">
    <p> this number is -27</p>
  </div>
</div>

Answer 4

Поскольку кажется, что вы не можете изменить HTML, вам нужно будет использовать .split(), который предполагает, что последнее "слово" всегда является требуемым значением.

Используя jquery, вы можете использовать .map для преобразования коллекции jquery, чтобы получить конкретные значения и обработать их (в этом случае проверьте, что они >=0), и .toArray() для преобразования их в массив.

Предполагается, что окончательным требованием является массив чисел.

var nums = $(".number-container p").map(function() { 
    var num = parseInt($(this).text().split(' ').pop());
    return num >= 0 ? num : null;
}).toArray();

console.log(nums);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test"> 
    <h2>main container</h2>
    <p> some sample text</p>
    <div class="number-container">
    <p> this number is 1</p>
    </div>
</div>

<div class="test"> 
    <h2>main container</h2>
    <p> some sample text</p>
    <div class="number-container">
    <p> this number is 5</p>
    </div>
</div>

<div class="test"> 
    <h2>main container</h2>
    <p> some sample text</p>
    <div class="number-container">
    <p> this number is -32</p>
    </div>
</div>

<div class="test"> 
    <h2>main container</h2>
    <p> some sample text</p>
    <div class="number-container">
    <p> this number is -27</p>
    </div>
</div>

Answer 5

Здесь не требуется jQuery.В вашем вопросе остается неясным, хотите ли вы только неотрицательное число или только отрицательные числа.Я добавил примеры для обоих вариантов.

const numberContainers = document.querySelectorAll('.test .number-container p');
let arr = [];

for (numberContainer of numberContainers) {
  arr.push(parseInt(numberContainer.textContent.split(' ').pop()));
}

console.log(arr.filter(e=>e>=0));
console.log(arr.filter(e=>e<0));

<div class="test"> 
    <h2>main container</h2>
    <p> some sample text</p>
    <div class="number-container">
    <p> this number is 1</p>
    </div>
</div>

<div class="test"> 
    <h2>main container</h2>
    <p> some sample text</p>
    <div class="number-container">
    <p> this number is 5</p>
    </div>
</div>

<div class="test"> 
    <h2>main container</h2>
    <p> some sample text</p>
    <div class="number-container">
    <p> this number is -32</p>
    </div>
</div>

<div class="test"> 
    <h2>main container</h2>
    <p> some sample text</p>
    <div class="number-container">
    <p> this number is -27</p>
    </div>
</div>