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。在您的问题中，仍然不清楚只需要非负数还是负数。我已经为两个变体添加了示例。

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>

Answer 2

实际上，对于每个迭代元素，您都需要使用p查找包含值的.find(".number-container p")。

然后，您需要使用".number-container p"获取.text()内部的值，而不是仅使用value的{{1}}回调参数，该参数将保存一个jQuery DOM对象。 / p>

$(".number-container").filter

注意：

由于检索到的值为$(".test").each(function(i) { let value = $(this).find(".number-container p").text(); if (value.indexOf("-") == -1) { $(this).hide(); } });而不是数字，因此您需要使用strings检查负值。
您需要从以下类别的名称中删除前导value.indexOf("-") .。

演示：

这是一个演示，仅在单击按钮时显示带有负值的pragraph：

class=".number-container"

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

Answer 3

您似乎无法更改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 4

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

这应该可以解决问题。

我使用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>

如何创建和排列并过滤负数

5 个答案: