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

Question

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

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

Это сделано для того, чтобы я мог сделать цвета фона синхронизированными, серыми, белыми, серо-белыми для каждого из элементов 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>

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>

Answer 2

Попробуйте

1002 *