Вопрос n-го ребенка с аккордеоном jquery с нечетными / четными строками - PullRequest
Новая
       3

Вопрос n-го ребенка с аккордеоном jquery с нечетными / четными строками

0 голосов
/ 27 марта 2012

У меня есть jquery аккордеон, который я хочу использовать nth-child, чтобы назначить нечетные / четные фоны.

Структура выглядит следующим образом: 

<div class="jobmenu accordion">
    <a>
        <section>
            <article><img.....></article>
            <article>Item 1 name</article>
            <article>123</article>
        </section>
    </a> 
    <div>
        <table class="itemTable">
            <thead>...</thead>
            <tbody>...</tbody>
        </table>
    </div> 
    <a>
        <section>
            <article><img.....></article>
            <article>Item 2 name</article>
            <article>432</article>
        </section>
    </a> 
    <div>
        <table class="itemTable">
            <thead>...</thead>
            <tbody>...</tbody>
        </table>
    </div>     
</div>

nth-child отлично работаетв таблицах присваиваем нечетные и четные значения трсам в tbody, но я хочу сделать то же самое с аккордеоном.все статьи корректно работают с заданными значениями ширины, чтобы nth-дочерний элемент имел равномерный вид сворачиваемого списка, но каждому «а» присваивается нечетный стиль.если только я физически не добавлю класс к нему в php, но это лишает смысла чистый дизайн CSS.

css: 

.jobmenu a {
    height:40px;
}

.jobmenu a:nth-child(even){
    background: #CCC;
    font-size: 12px;
    display: block;
    position: relative; /*To help in the anchoring of the ".statusicon" icon imageglossyback.gif*/
    width: auto;
    padding: 4px 0;
    padding-left: 10px;
    padding-right:10px;
    text-decoration: none;
    cursor:pointer;
}

.jobmenu a:nth-child(odd){
    background: #999;
    font-size: 12px;
    display: block;
    position: relative; /*To help in the anchoring of the ".statusicon" icon imageglossyback.gif*/
    width: auto;
    padding: 4px 0;
    padding-left: 10px;
    padding-right:10px;
    text-decoration: none;
    cursor:pointer;
}
.jobmenu article:nth-child(1)
{
    width:350px; margin-left:15px; text-wrap:normal; float:left;
}

.jobmenu article:nth-child(2)
{
    width:100px; float:left;
}

.jobmenu article:nth-child(3)
{
    width:200px; float:left;
}

Я предполагаю, что это потому, что a находятся внечетная позиция и деления в четном.Есть ли способ обойти это?

1 Ответ

1 голос
/ 27 марта 2012 
.jobmenu a:nth-child(4n+1){
    /*style*/
}

Я пытался, и это работает.

...