Saya memiliki tata letak berikut, Ini hanya sebuah contoh dan berubah dari halaman ke halaman.

Yang perlu saya lakukan adalah menambahkan 2 kelas CSS yang berbeda ke masing-masing div yang memiliki kelas sudah padding vertikal dan HARUS MEMILIKI ID.

Ini agar saya bisa membuat warna latar belakang menjadi sinkron, abu-abu, putih, abu-abu putih untuk setiap div yang memiliki ID. Jika mereka tidak memiliki ID, mereka seharusnya tidak memiliki kelas putih atau abu-abu yang ditetapkan: Karena jumlah div dengan ID berubah dari halaman ke halaman, saya memerlukan beberapa jenis fungsi jQuery untuk secara terprogram menambahkan latar belakang putih dan abu-abu untuk ganjil atau genap atau yang ya dan satu baris tidak. Tapi DIV sudah HARUS MEMILIKI dan ID.

Sebagai contoh:

.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>
-3
user1673498 25 Oktober 2019, 12:23

2 jawaban

Jawaban Terbaik

Anda dapat melakukan ini dengan css dengan menggunakan [id] dengan :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 Oktober 2019, 09:35

Coba ini

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 Oktober 2019, 12:05