jQuery: как переместить несколько классов элемента в другой элемент?

Question

Я пытаюсь сделать условное заявление для добавления найденных классов к элементу.Мой код ниже:

   <div class="options-container class1 class2 class3-ul class4">
     <ul class="">
      <li>
        <div class="other-element"></div>
      </li>
    </ul>
  </div>

        $('.options-container').each(function(i){ //holds multiple classes

                var classList = $('ul', this).attr('class').split(/\s+/),
                var myClasses = ['class1', 'class2', 'class3']; 
                //what classes to look for and match.    

             $.each(classList, function(index, item) {

               if (item === myClasses.index()) {
                 $('.other-element').addClass(item); // append matched classes
               }

             });

        });

Я не уверен, что я делаю с индексом ... По сути, я просто пытаюсь выяснить, есть ли у элемента div (.options-container) определенные классы,и если да, переместите их в класс элемента (.other-element)

Answer 1

// No need to re-declare this for every iteration
var myClasses = ['class1', 'class2', 'class3'];

$('.options-container').each(function(i) {
  var $this = $(this);
  var classList = $this.attr('class').split(/\s+/);
  var classesToAdd = myClasses.filter(function(element){
    return classList.indexOf(element) > -1;
  });
  
  // Change only the other element that is a child of the ul
  // You can give addClass an array.  You don't have to explicitly
  // loop
  $this.find('.other-element').addClass(classesToAdd);
  
  // From your comments you asked if you could remove the classes
  // from the parent.  You can do that with removeClass.
  $this.removeClass(classesToAdd);
});

div.class1.class2.class3 { color: red; }
div.class1.class2 { color: green; }
div.class1 { color: blue; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="options-container class1 class2 class3-ul class3">
  <ul>
    <li>
      <div class="other-element">A</div>
    </li>
  </ul>
</div>

<div class="options-container class1 class2 class3-ul">
  <ul>
    <li>
      <div class="other-element">B</div>
    </li>
  </ul>
</div>

<div class="options-container class1 class3-ul">
  <ul>
    <li>
      <div class="other-element">C</div>
    </li>
  </ul>
</div>