获取数据id

Question

我想为每一行获取我的左、右div的所有id，对于div左侧的id，我想将其存储在数组中并按升序排列，并将其与左div的id进行比较。但我搞不懂我怎么能做到这一点。

提前谢谢你。

​

<div class="content">
  <div class="row" id="row_0">
    <div class="divider">
      <div id="left">
        <div data-id="310"><span data-id="310">Text here</span></div>
        <div data-id="312"><span data-id="312">Text here</span></div>
        <div data-id="320"><span data-id="320">Text here</span></div>
        <div data-id="311"><span data-id="311">Text here</span></div>
      </div>
    </div>
  <div class="divider">
    <div id="right">
      <div class="mixing"><span data-id="320"> Text</span></div>
      <div class="mixing"><span data-id="310"> Text</span></div>
      <div class="mixing"><span data-id="312"> Text</span></div>
      <div class="mixing"><span data-id="311"> Text</span></div>
    </div>
  </div>        
</div>      

<div class="row" id="row_1">
  <div class="divider">
    <div id="left">
      <div data-id="310"><span data-id="310">Text here</span></div>
      <div data-id="312"><span data-id="312">Text here</span></div>
      <div data-id="320"><span data-id="320">Text here</span></div>
      <div data-id="311"><span data-id="311">Text here</span></div>
    </div>
  </div>
  <div class="divider">
    <div id="right">
      <div class="mixing"><span data-id="320"> Text</span></div>
      <div class="mixing"><span data-id="310"> Text</span></div>
      <div class="mixing"><span data-id="312"> Text</span></div>
      <div class="mixing"><span data-id="311"> Text</span></div>
    </div>
  </div>        
</div>  

<div class="btn-submit"><button id="go">Go</button></div>
</div>      
<script>
  $(function(){
    $('#go').on('click',function(e){
      $('div.content').each(function(index) {
        // getting first all the id's of left div for row_0 , my code is not correct
        var left_row_+index[] = $('#row_'+index).find('div#left').find('div').data('id');
        // arrange the left_row_+index to Asc Order
        // get the right id's store it to array , no need to arrange
        // compare two array
        if leftarray != rightarray
          return false // exit loop immediately no further checking or continuing the loop if not equal. else console.log("Looks good");
      });
    });
  });
</script>

​

Answer 1

您可以使用.map从左div获取所有值，然后使用.sort()对它们进行排序。排序后，只需对右div使用.each循环，然后比较数据id和数组的值，最后打印一些消息。

演示代码：

​

$(function() {
  $('#go').on('click', function(e) {
    //loop through left div
    $('div.left').each(function(index) {
      //get all values of left div
      var itsort = $(this).find('span[data-id]').map(function() {
        return $(this).data('id');
      }).get();
      itsort.sort(); //sort
      console.log(itsort)
      var flag = true;
      //loop through right div
      $(this).closest(".row").find(".right span[data-id]").each(function(index, value) {
        //check if both have same at given position or not
        if ($(this).data('id') != itsort[index]) {
          console.log($(this).data('id'))
          console.log("not good")
          flag = false;
          return false;
        }
      })
      if (flag == true) {
        console.log("All good..." + $(this).closest(".row").attr('id'))

      }
    });
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div class="row" id="row_0">
    <div class="divider">
      <div class="left">
        <div data-id="310"><span data-id="310">Text here</span></div>
        <div data-id="312"><span data-id="312">Text here</span></div>
        <div data-id="320"><span data-id="320">Text here</span></div>
        <div data-id="311"><span data-id="311">Text here</span></div>
      </div>
    </div>
    <div class="divider">
      <div class="right">
        <div class="mixing"><span data-id="320"> Text</span></div>
        <div class="mixing"><span data-id="310"> Text</span></div>
        <div class="mixing"><span data-id="312"> Text</span></div>
        <div class="mixing"><span data-id="311"> Text</span></div>
      </div>
    </div>
  </div>

  <div class="row" id="row_1">
    <div class="divider">
      <div class="left">
        <div data-id="310"><span data-id="310">Text here</span></div>
        <div data-id="312"><span data-id="312">Text here</span></div>
        <div data-id="320"><span data-id="320">Text here</span></div>
        <div data-id="311"><span data-id="311">Text here</span></div>
      </div>
    </div>
    <div class="divider">
      <div class="right">
        <div class="mixing"><span data-id="310"> Text</span></div>
        <div class="mixing"><span data-id="311"> Text</span></div>
        <div class="mixing"><span data-id="312"> Text</span></div>
        <div class="mixing"><span data-id="320"> Text</span></div>
      </div>
    </div>
  </div>

  <div class="btn-submit"><button id="go">Go</button></div>
</div>

​