AMcoder - javascript, python, java, html, php, sql

փոխել յուրաքանչյուր այլ տարրի ֆոնի գույնը

Ես ուզում եմ փոխել յուրաքանչյուր այլ տարրի ֆոնի գույնը հետևյալ կերպ.

<div class="dets">
 <div>Simple Layout</div>
 <div>Few Pictures/Links</div>
 <div>Element Uniformity</div>
</div>

Այսպիսով, առաջինը [Simple Layout] կլինի սպիտակ, երկրորդը [Few Pictures/Links] կլինի սև և այլն: Ես ունեմ այս կառույցներից երեքը, որոնք տեղակայված են որոշ այլ div տարրերի մեջ: Ես գիտեմ :ven,:odd մեթոդների մասին, բայց դա չի ստացվում այնպես, ինչպես սպասվում էր: Այն շարունակվում է «dets» դասերից յուրաքանչյուրի միջով՝ ամեն անգամ ավելացնելով ինդեքսը։ Ես ուզում եմ կենտ տողեր՝ սպիտակ, նույնիսկ՝ սև։ Կա՞ որևէ «դետս» դասի բնական ինդեքսը վերագործարկելու միջոց: Ես չեմ ուզում օգտագործել սեղան:

Ես ներկայումս օգտագործում եմ հետևյալ jQuery-ը՝ ֆոնի գույնը սահմանելու համար.

$(".dets div:odd").css('background-color', 'white');
$(".dets div:even").css('background-color', 'black');
html jquery css css-selectors
08.06.2017

Պատասխանները:


1

Փորձեք:

$(".dets>div:nth-child(odd)").css('background-color', 'white');
$(".dets>div:nth-child(even)").css('background-color', 'black');

նաև կարող եք դա անել միայն css-ով.

.dets>div:nth-child(odd){
 background-color:white;
}
.dets>div:nth-child(even){
 background-color:black;
}
08.06.2017
  • jQuery-ն աշխատեց: Չեմ փորձել CSS-ը: Կարո՞ղ եք բացատրել, թե ինչու իմ օգտագործած :even,:odd-ը սպասվածի պես չաշխատեց: 08.06.2017
  • @QuitoGuillermos Դուք պետք է օգտագործեք երրորդ երեխա նախքան զույգ և կենտ հիմնաբառեր օգտագործելը: ստուգեք այս հղումը լրացուցիչ տեղեկությունների համար: w3schools.com/cssref/sel_nth-child.asp 08.06.2017

    • 2

    Ավելի լավ է օգտագործել css nth-child:

    Դուք կարող եք օգտագործել id՝ .dets դասի փոխարեն՝ նվազեցնելու ինդեքսային ժամանակը, ինչպես #dets

    Դուք կարող եք ունենալ այլ ընտրիչ, ինչպես նաև կարող եք օգտագործել այն ըստ ձեր պահանջի.

    • tr:nth-child(2n+1) Ներկայացնում է HTML աղյուսակի կենտ տողերը:
    • tr:nth-child(կենտ) Ներկայացնում է HTML աղյուսակի կենտ տողերը:
    • tr:nth-child(2n) Ներկայացնում է HTML աղյուսակի զույգ տողերը:
    • tr:nth-child( even) Ներկայացնում է HTML աղյուսակի զույգ տողերը:
    • span:nth-child(0n+1) Ներկայացնում է span տարրը, որն իր ծնողի առաջին երեխան է. սա նույնն է, ինչ :first-child ընտրիչը։
    • span:nth-child(1) Համարժեք է վերը նշվածին:
    • span:nth-child(-n+3) Համընկնում է, եթե տարրը իր ծնողի առաջին երեք երեխաներից մեկն է, ինչպես նաև span:

    .dets>div:nth-child(even){
background:#000;
color:#fff;
}

.dets>div:nth-child(odd){
background:#fff;
}
    <div class="dets">
 <div>Simple Layout</div>
 <div>Few Pictures/Links</div>
 <div>Element Uniformity</div>
</div>

    08.06.2017

    3

    Դուք կարող եք դրան հասնել հենց css-ում՝ օգտագործելով

    .dets div:nth-child(կենտ){ background-color:white; } .dets div:nth-child( even){ background-color: black; }

    08.06.2017
    Նոր նյութեր
    Օգտագործելով Fetch Vs Axios.Js-ը՝ HTTP հարցումներ կատարելու համար
    JavaScript-ը կարող է ցանցային հարցումներ ուղարկել սերվեր և բեռնել նոր տեղեկատվություն, երբ դա անհրաժեշտ լինի: Օրինակ, մենք կարող ենք օգտագործել ցանցային հարցումը պատվեր ներկայացնելու,..
    Տիրապետել հանգստության արվեստին. մշակողի ուղեցույց՝ ճնշման տակ ծաղկելու համար
    Տիրապետել հանգստության արվեստին. մշակողի ուղեցույց՝ ճնշման տակ ծաղկելու համար Ինչպե՞ս հանգստացնել ձեր միտքը և աշխատեցնել ձեր պրոցեսորը: Ինչպես մնալ հանգիստ և զարգանալ ճնշման տակ...
    Մեքենայի ուսուցում բանկային և ֆինանսների ոլորտում
    Բարդ, խելացի անվտանգության համակարգերը և հաճախորդների սպասարկման պարզեցված ծառայությունները բիզնեսի հաջողության բանալին են: Ֆինանսական հաստատությունները, մասնավորապես, պետք է առաջ մնան կորի..
    Ես AI-ին հարցրի կյանքի իմաստը, այն ինչ ասում էր, ցնցող էր:
    Այն պահից ի վեր, երբ ես իմացա Արհեստական ​​ինտելեկտի մասին, ես հիացած էի այն բանով, թե ինչպես է այն կարողանում հասկանալ մարդկային նորմալ տեքստը, և այն կարող է առաջացնել իր սեփական արձագանքը դրա..
    Ինչպես սովորել կոդավորումը Python-ում վագրի պես:
    Սովորելու համար ծրագրավորման նոր լեզու ընտրելը բարդ է: Անկախ նրանից, թե դուք սկսնակ եք, թե առաջադեմ, դա օգնում է իմանալ, թե ինչ թեմաներ պետք է սովորել: Ծրագրավորման լեզվի հիմունքները, դրա..
    C++-ի օրական բիթ(ե) | Ամենաերկար պալինդրոմային ենթաշարը
    C++ #198-ի ամենօրյա բիթ(ե), Ընդհանուր հարցազրույցի խնդիր. Ամենաերկար պալինդրոմային ենթատող: Այսօր մենք կանդրադառնանք հարցազրույցի ընդհանուր խնդրին. Ամենաերկար palindromic substring...
    Kydavra ICAReducer՝ ձեր տվյալների ծավալայինությունը նվազեցնելու համար
    Ի՞նչ է ICAReducer-ը: ICAReducer-ն աշխատում է հետևյալ կերպ. այն նվազեցնում է նրանց միջև բարձր փոխկապակցված հատկանիշները մինչև մեկ սյունակ: Բավականին նման է PCAreducer-ին, չնայած այն..