Как добавить три разных класса в несколько div с помощью jQuery?

ProgramBox

Как добавить три разных класса в несколько div с помощью jQuery?

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

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я использую jQuery для добавления трех разных классов в мой div с одноименными классами. Вот мой HTML:

 <div class="main-class">
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
</div>

вот мой код jquery

 $(document).ready(function() {
    var name=$(".myclass").length ;         
    var selector = '.main-class';

    $(selector).ready(function(){
     for(var s=1;s<=name;s  )
       {   
         if(s>3)
            {   
                for(var z=1;z<=3;z  )
                {
                    alert(z);
                }
                s=s 2;

            }
            else
            {   
              if(s==1)
                $('.myclass').addClass('red');
              if(s==2)
                $('.myclass').addClass('yellow');
              if(s==3)
                $('.myclass').addClass('gray');
            }

        }

    });
});

я хочу, чтобы мой вывод выглядел следующим образом

 <div class="main-class">
<div class="myclass red"></div>
<div class="myclass yellow"></div>
<div class="myclass gray"></div>
<div class="myclass red"></div>
<div class="myclass yellow"></div>
<div class="myclass gray"></div>
<div class="myclass red"></div>
<div class="myclass yellow"></div>
</div>

но я получил это

 <div class="main-class">
    <div class="myclass red yellow gray"></div>
    <div class="myclass red yellow gray"></div>
    <div class="myclass red yellow gray"></div>
    <div class="myclass red yellow gray"></div>
    <div class="myclass red yellow gray"></div>
    <div class="myclass red yellow gray"></div>
    <div class="myclass red yellow gray"></div>
    <div class="myclass red yellow gray"></div>
    </div>

Я новичок в jQuery.

Ответ №1:

Вы могли бы использовать addClass с обратным вызовом и проверить индекс

 $('.myclass').addClass(function(i) {
  return i % 3 === 0 ? 'red' : (i % 3 === 1 ? 'yellow' : 'gray');
});

 .red {color: red}
.yellow {color: yellow}
.gray {color: gray}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-class">
  <div class="myclass">text</div>
  <div class="myclass">text</div>
  <div class="myclass">text</div>
  <div class="myclass">text</div>
  <div class="myclass">text</div>
  <div class="myclass">text</div>
  <div class="myclass">text</div>
  <div class="myclass">text</div>
</div>

Ответ №2:

Попробуйте это!

Таким образом, вы можете добавить n количество имен классов в массив, и код будет работать.

 var c = ['red', 'yellow', 'gray']
var counter = 0
$('.myclass').each(function(i, el){
  $(this).addClass(c[counter])
  if(counter < (c.length -1))
    counter  
   else
    counter = 0
})

 .myclass{
  height: 20px
}
.red {
  background: red
}

.yellow{
  background: yellow
}

.gray{
  background: gray;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-class">
  <div class="myclass"></div>
  <div class="myclass"></div>
  <div class="myclass"></div>
  <div class="myclass"></div>
  <div class="myclass"></div>
  <div class="myclass"></div>
  <div class="myclass"></div>
  <div class="myclass"></div>
</div>

Ответ №3:

Используйте each() для перебора ваших элементов addClass() в соответствии с вашими потребностями.

 var classArr = ['red', 'yellow', 'grey'];
var i=0;
$('.main-class').children().each(function(key, value){
  if(i == 3) { i=0; } 
  $(value).addClass(classArr[i]);
  i  ;
});

Показать фрагмент кода

 var classArr = ['red', 'yellow', 'grey'];
var i=0;
$('.main-class').children().each(function(key, value){
  if(i == 3) { i=0; } 
  $(value).addClass(classArr[i]);
  i  ;
});

 .red
{
 color: red; 
}
.yellow
{
 color: yellow; 
}
.grey
{
 color: grey; 
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-class">
<div class="myclass">RED</div>
<div class="myclass">YELLOW</div>
<div class="myclass">GREY</div>
<div class="myclass">RED</div>
<div class="myclass">YELLOW</div>
<div class="myclass">GREY</div>
<div class="myclass">RED</div>
<div class="myclass">YELLOW</div>
</div>

Expand snippet

Ответ №4:

Вы можете использовать jquery .each() для итерации элементов и % для просмотра значения по модулю с 3:

 $('.myclass').each(function(index) {
    if (index % 3 === 0) {
        $(this).addClass("red");
    } else if (index % 3 === 1) {
        $(this).addClass("yellow");
    } else {
        $(this).addClass("green");
    }
});

Ваша ошибка заключалась в том, что

 $('.myclass').addClass('red');

добавляет red как class ко всему, имеющему class of myclass .

Ответ №5:

ОБНОВЛЕНИЕ: теперь код работает нормально, вам нужно отобразить цвета в массиве, затем выполнить цикл над каждым .myclass элементом и задать имя класса в соответствии с позицией в массиве цветов, которая сбрасывается, если .myclass индекс, равный длине цветов, повторяется.

 $(document).ready(function() {
  var colors = ["green", "red", "blue"];
var c = -1;
  $('.main-class .myclass').each(function() {
    c  ;
    if(c==colors.length)c=0;
$(this).addClass(colors[c]);
//to test using .css();
    $(this).css({
      "color": colors[c]
    });
  });

});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-class">
  <div class="myclass">colors</div>
  <div class="myclass">colors</div>
  <div class="myclass">colors</div>
  <div class="myclass">colors</div>
  <div class="myclass">colors</div>
  <div class="myclass">colors</div>
  <div class="myclass">colors</div>
  <div class="myclass">colors</div>
</div>

обновленный тестовый фрагмент кода