如果有 ID，则添加 css 类 jQuery 多行

Question

我有以下布局，这只是一个例子，它会随着页面的变化而变化。

我需要做的是将 2 个不同的 CSS 类添加到每个具有该类已经垂直填充并且必须有一个 ID 的 div。

这样我就可以使每个具有 ID 的 div 的背景颜色同步，灰色，白色，灰白色。如果他们没有 ID，他们不应该分配一个白色或灰色的类：随着 ID 的数量从页面到页面变化，我需要某种类型的 jQuery 函数来以编程方式为奇数或偶数或那些添加白色和灰色背景是的，一排没有。但 DIV 的必须已经和 ID。

例如：

.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

您可以通过使用[id]with来使用 css 执行此操作: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>