将第一个和第二个div的值转换为单独的数组

Question

如何将第1和第2个div的所有值都放入单独的数组中？

我发现div的值为yes。

想要将具有yes div的所有名称和数字存储到两个单独的数组中。 这是代码：

＆＃13;

＆＃13;

$(document).ready(function() {
  $('#btn').on('click', function() {
    $('div').each(function() {
      if ($(this).find('#nmme').eq(0).text() == 'yes') {
        $(this).css('background', 'red');
      }
    });
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div style="display: table-cell;  width: 65px">name</div>
  <div style="display: table-cell;  width: 65px">number</div>
  <div style="display: table-cell;  width: 50px">status</div>
</div>
&nbsp;
<div>
  <div style="display: table-cell;  width: 65px">Michael </div>

  <div style="display: table-cell; width: 65px">17</div>

  <div style="display: table-cell; width: 50px" id="nmme">yes</div>

</div>
<div>
  <div style="display: table-cell; width: 65px">Vic </div>

  <div style="display: table-cell; width: 65px">20</div>

  <div style="display: table-cell; width: 50px" id="nmme">no</div>

</div>

<div>
  <div style="display: table-cell; width: 65px">Jose </div>

  <div style="display: table-cell; width: 65px">50</div>

  <div style="display: table-cell; width: 50px" id="nmme">yes</div>

</div>
<input type="button" id="btn" name="btn" class="btn" value="button">

＆＃13;

＆＃13;

＆＃13;

这是一个小提琴： JSFIDDLE

Answer 1

将yesArray和noArray创建为2个不同的变量，然后根据条件分配值为yes和no。

示例：fiddle

$(document).ready(function() {
  $('#btn').on('click', function() {
    var yesArray = [];
    var noArray = [];
    $('div').each(function() {
        var elements = $(this).find('div');
      if ($(this).find('#nmme').eq(0).text() == 'yes') {
        $(this).css('background', 'red');
        $(this).css('color', 'white');   
        yesArray.push({ 
            name : $(elements[0])[0].innerHTML,
          number : $(elements[1])[0].innerHTML
        });
      } else if ($(this).find('#nmme').eq(0).text() == 'no') {
          noArray.push({ 
            name : $(elements[0])[0].innerHTML,
          number : $(elements[1])[0].innerHTML
        });
      }
    });
    console.log(yesArray);
    console.log(noArray);
  });
});

Answer 2

检查修改后的代码，希望有所帮助;

＆＃13;

＆＃13;

$(document).ready(function() {
  $('#btn').on('click', function() {
    var names = [], numbers = [];
    $('div').each(function() {
    	var current = $(this);
      if(current.find('div:last-child').text() == 'yes') {
        names.push(current.find('div.name').text());
        numbers.push(current.find('div.number').text());
      } 
    });
    console.log(names, numbers);
    $('#result').html('Array 1: ' + names.join(', ') + '<br>' + 'Array 2: ' + numbers.join(','));
  });
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div>
  <div style="display: table-cell;  width: 65px">name</div>
  <div style="display: table-cell;  width: 65px">number</div>
  <div style="display: table-cell;  width: 50px">status</div>
</div>
<div>
  <div style="display: table-cell;  width: 65px" class="name">Michael </div>
  <div style="display: table-cell; width: 65px" class="number">17</div>
  <div style="display: table-cell; width: 50px">yes</div>
</div>
<div>
  <div style="display: table-cell; width: 65px" class="name">Vic </div>
  <div style="display: table-cell; width: 65px" class="number">20</div>
  <div style="display: table-cell; width: 50px">no</div>
</div>
<div>
  <div style="display: table-cell; width: 65px" class="name">Jose </div>
  <div style="display: table-cell; width: 65px" class="number">50</div>
  <div style="display: table-cell; width: 50px">yes</div>
</div>
<input type="button" id="btn" name="btn" class="btn" value="button">
<div id="result"></div>

＆＃13;

＆＃13;

＆＃13;