如何从一系列<span>创建数组

时间:2017-08-23 05:32:18

标签: jquery css

点击import subprocess cmd = ['pgrep -f .*python.*testing03.py'] process = subprocess.Popen(cmd, shell=True, stdout=subprocess.PIPE, stderr=subprocess.PIPE) my_pid, err = process.communicate() if len(my_pid.splitlines()) >0: print("Running") exit() else: print("Not Running") 时,如何通过特定<span>中的一系列<div>制作数组?

btn

输出 <div class="btn">Make Arrays<div> <div class="Wrapper"> <div class="some elements"></div> <div class="Arrays"> <input type="text" placeholder="enter value"> <div>some stuff</div> <span>123.23</span> <span>52</span> <span>728.4</span> <span>52</span> </div> </div> <div class="Wrapper"> <div class="some elements"></div> <div class="Arrays"> <input type="text" placeholder="enter value"> <div>some stuff</div> <span>10.8</span> <span>28.7</span> </div> </div> ... var Array1 = ['123.23', '52', '728.4', '52'] ...

问题是,我不知道会有多少var Array2 = ['10.8', '28.1'],因为它是一个动态元素。所以也许有一种方法可以通过将'Array1','Array2'等虚拟类添加到'class =“Arrays”'

中来对其进行索引。

所以,基本上,我如何索引每个class="Arrays" div并从其<Arrays>

中创建一个数组

非常感谢~~~ =)

3 个答案:

答案 0 :(得分:3)

这将返回数组数组。

&#13;
&#13;
function getArray() {
  const arr = Array.from(document.querySelectorAll('.Arrays'))
    .map(a => Array.from(a.querySelectorAll('span')).map(span => span.textContent));

  console.log(arr)
}
&#13;
<button onclick="getArray()">getArray</button>

<div class="btn">Make Arrays
  <div>

    <div class="Wrapper">
      <div class="some elements"></div>
      <div class="Arrays">
        <input type="text" placeholder="enter value">
        <div>some stuff</div>
        <span>123.23</span>
        <span>52</span>
        <span>728.4</span>
        <span>52</span>
      </div>
    </div>
    <div class="Wrapper">
      <div class="some elements"></div>
      <div class="Arrays">
        <input type="text" placeholder="enter value">
        <div>some stuff</div>
        <span>10.8</span>
        <span>28.7</span>
      </div>
    </div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

这可以从跨度中的值中获取数组。这是一个使用jQuery的简单解决方案。

$('.btn').click(function(){
    var arrs = [];
    $('.Arrays').each(function(i,el){
        temp = [];
        $('span', $(el)).each(function(i2,el2){
            temp.push($(el2).text());
        });
        arrs.push(temp);
    });
    console.log(arrs);
});

答案 2 :(得分:0)

正如您在代码段中看到的那样。在onClick方法中,将检索范围中的值并将其推送到名为arr的parentArray中。此外,形成的childArray附加到列表中。

在示例中,我曾经为每个span提供类,从而使用这些类名检索值。在另一种方法中,您可以遍历容器中的每个span并将这些值推送到childArray本身。

&#13;
&#13;
var arr = [];
$('.btn').on('click', function(){
  var newArr = [];
  $('.Arrays').each(function(index, el) {
    $(el).find('span').each(function(ind, spanEl) {
      var value = $(spanEl).html();
      newArr.push(value);
    })
  })
  
  arr.push(newArr)
  
  $('.list').append('<li>'+newArr+'</li>')
  
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="Wrapper">
  <div class="some elements"></div>
  <div class="Arrays">
    <input type="text" placeholder="enter value">
    <div>some stuff</div>
    <span class="one">123.23</span>
    <span class="two">52</span>
    <span class="three">728.4</span>
    <span class="four">52</span>
  </div>
</div>
<div class="Wrapper">
  <div class="some elements"></div>
  <div class="Arrays">
    <input type="text" placeholder="enter value">
    <div>some stuff</div>
    <span>10.8</span>
    <span>28.7</span>
  </div>
</div>

<button class="btn">Make Arrays</button>

<h4>List</h4>
<ul class="list">
</ul>
&#13;
&#13;
&#13;