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）是否有某些类，如果是，则将它们移动到元素的类中（。其他元件）

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>