Получение идентификатора данных

ProgramBox

Получение идентификатора данных

Post author:admin
Запись опубликована:17 декабря, 2022
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

Я хочу получить все идентификаторы моего левого и правого div для каждой строки и для идентификаторов внутри div слева, я хочу сохранить в массиве и упорядочить его в порядке возрастания и сравнить его с идентификаторами моего левого div. но я не понимаю, как я могу добитьсяна нем.

Заранее благодарю вас.

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

Развернуть фрагмент

1. Вы описываете подход, который хотите использовать, но не результат, которого хотите достичь. Какова ваша цель здесь? Чтобы увидеть id , существует ли an в обоих элементах? Скорее всего, есть лучший способ, чем то, что вы думаете.

2. @ScottMarcus, да, я хочу проверить, равен ли левый div правому div, он должен совпадать с тем, какой индекс соответствует порядку идентификатора. пример уже упорядочен в порядке возрастания left_array=[310,311,312,320] затем я сравню его с right_array = [311,310,312,320] если не в том же порядке, он возвращает false и выходит из цикла, значит, это ошибка

3. Ну, опять же, вы предполагаете, что лучший способ сравнения — сначала отсортировать, что может быть необязательно.

4. Но почему это не обязательно?

5. идентификатор данных левого div должен быть изменен? почему не правильно?

Ответ №1:

Вы можете использовать .map для получения всех значений из левого div, а затем использовать .sort() для их сортировки. После сортировки просто используйте .each цикл для правильного div, затем сравните значения data-id и array, наконец, распечатайте несколько сообщений.

Демонстрационный код :

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

Развернуть фрагмент

1. это всегда нехорошо, даже если я настраиваю тот же идентификатор

2. Привет, это была ошибка с моей стороны, предыдущий код сравнивал оба right div для одного left div, который я исправил, пожалуйста, проверьте сейчас.