如何创建、排列和过滤负数答案

【问题标题】：How do I create and array and filter the negative numbers如何创建、排列和过滤负数
【发布时间】：2018-08-24 09:17:48
【问题描述】：

这里的目标是遍历所有“.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>

Java脚本：

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

【问题讨论】：

这条语句 $(".number-container") 将返回 p 标签 "
this number is -27
" 而不是数字
你能改变 HTML 吗？或者你是否坚持这一点（例如来自第 3 方）。如果可以更改，则将数字放入<span>（带有类）中，然后使用简单的$(".value")
我正在努力解决这个问题。我不想展示代码，而且我的 javascript 技能目前非常薄弱。所以我试着举个例子。
你为什么不尝试使用数据属性：D
请不要通过将代码换成完全不同的东西来完全改变问题。而是提出一个新问题。

标签： javascript jquery arrays loops

【解决方案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>

【讨论】：

jQuery 在这里只提供缺点。您需要 Javascript 原生函数，例如 split()、pop() 和 filter()。
虽然非 jquery 解决方案当然是有帮助的，但请不要试图将你的反 jquery 议程推给那些发现 jquery 语法对用户更友好和更简洁的用户。 jquery/vanilla javascript 是当地政策和选择的问题。
虽然不是这个讨论的真正地方，但除了“仅提供缺点”之外，您没有给出任何理由。 jquery 开发人员始终仍然使用原生函数，例如 split/pop/parseInt/filter。代码中唯一非 jquery 部分是过于冗长的 document.querySelectorAll('.test .number-container p') 与 $(".test .number-container p") （obv 返回的结果略有不同）。
冗长不是 imo 的相关缺点。除了没有阻止您在代码库中执行const $ = document.querySelectorAll 之外。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

然后您需要使用.text() 获取".number-container p" 中的值，而不是仅使用$(".number-container").filter 的value 回调参数，该参数将保存一个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"。

演示：

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

$("#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>

【讨论】：

【解决方案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); 

    })

【讨论】：

【解决方案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>

【讨论】：

为什么？虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。