Добавить класс CSS JQuery несколько строк, если он имеет идентификатор

Question

У меня есть следующий макет, это просто пример, и он меняется от страницы к странице.

Что мне нужно сделать, это добавить 2 разных CSS-класса к каждому из div, у которого класс уже имеет вертикальное заполнение и ДОЛЖЕН ИМЕТЬ ИД.

Это сделано для того, чтобы я мог синхронизировать цвета фона: серый, белый, серый белый для каждого элемента div, у которого есть идентификатор. Если у них нет идентификатора, им не должен быть назначен класс белого или серого цвета: поскольку количество делений с идентификатором изменяется со страницы на страницу, мне нужен некоторый тип функции jQuery для программного добавления белого и серого фона для нечетных или четных или единиц. да и одной строки нет. Но у DIV-а ДОЛЖНЫ ИМЕТЬ ИМ.

Например:

.grey-bg {
    background-color: grey;
}

.white-bg {
    background-color: white;
}

<article id="55" class="post-55">
    <div class="entry-content">
        <div class="row-main">
            <div class="fl-row vertical-padding" id="welcome">1</div>
            <div class="fl-row vertical-padding" id="welcome-2">2</div>
            <div class="fl-row vertical-padding">3</div>
            <div class="fl-row vertical-padding">4</div>
            <div class="fl-row vertical-padding"id="hello">5</div>
            <div class="fl-row vertical-padding" id="welcome">6</div>
            <div class="fl-row vertical-padding">8</div>
            <div class="fl-row vertical-padding">9</div>
            <div class="fl-row vertical-padding" id="welcome-4">7</div>
            <div class="fl-row vertical-padding"id="hello">10</div>
        </div>
    </div>
</article>

javascript jquery html css

-3

user1673498 25 Окт 2019 в 12:23

Answer 1

Вы можете сделать это с помощью css, используя [id] с :nth-of-type():

.vertical-padding[id] {
  color: white;
}

.vertical-padding[id]:nth-of-type(odd) {
  background-color: grey;
}

.vertical-padding[id]:nth-of-type(even) {
  background-color: green;
}

<div class="entry-content">
  <div class="row-main">
    <div class="fl-row vertical-padding" id="welcome">1</div>
    <div class="fl-row vertical-padding" id="welcome-2">2</div>
    <div class="fl-row vertical-padding">3</div>
    <div class="fl-row vertical-padding">4</div>
    <div class="fl-row vertical-padding"id="hello">5</div>
    <div class="fl-row vertical-padding" id="welcome">6</div>
    <div class="fl-row vertical-padding">8</div>
    <div class="fl-row vertical-padding">9</div>
    <div class="fl-row vertical-padding" id="welcome-4">7</div>
    <div class="fl-row vertical-padding" id="hello">10</div>
  </div>
</div>

5

Cuong Le Ngoc 25 Окт 2019 в 09:35

Answer 2

Попробуй это

var a= document.getElementsByTagName('div');
var n= 1;
    for(int i =0;i<a.length;i++){
    {
       if(a[i].innerHTML.includes('id'))
       {
          if(n%2==0){
            //1st color
           }
          else{
          // 2nd color
          }
        n++;
       }
    }

0

harsha reddy 25 Окт 2019 в 12:05

Добавить класс CSS JQuery несколько строк, если он имеет идентификатор

2 ответа

Похожие вопросы

Новые вопросы

javascript