Селектор jQuery: nth-child()

Привет, пожалуйста, посмотрите на HTML ниже. Я пытаюсь использовать jQuery, чтобы получить каждый третий экземпляр в DIV с class="box", содержащимся в DIV с class="entry", чтобы не было правого поля:

Мой HTML-код:

<div class="entry">

    <div class="box">
        SOME HTML....
    </div><!-- end .box -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box I Want to remove right hand margin on this div -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box I Want to remove right hand margin on this div -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box I Want to remove right hand margin on this div -->

    </div>
    <!--end entry-->

Моя попытка с jQuery:

   <script>
        $(document).ready(function(){
            $("div.entry:nth-child(3)").css("margin", "0px");
        });
   </script>

Я не могу заставить это работать, может кто-нибудь помочь? Заранее спасибо!

спасибо всем, кто помог, предоставленное решение действительно правильное. Я кодирую предоставленный шаблон и обнаружил, что JQuery был настроен для работы в режиме совместимости, поэтому проблема была в $.


jquery jquery-selectors
person mtwallet    schedule 08.01.2010    source источник
comment
У меня была такая же проблема. Я создал контейнер div, в данном случае .entry, и использовал селектор div.entry›div.box:nth-child(3), который отлично сработал. Спасибо за помощь   -  person    schedule 31.03.2013

Ответы (4)


arrow_upward
11
arrow_downward

Из документов (выделено мной)

Соответствует всем элементам, которые являются n-м дочерним элементом своего родителя или являются четными или нечетными дочерними элементами родителя.

В настоящее время вы выбираете родителя, в то время как вы должны выбирать детей:

$("div.entry > div:nth-child(3)").css("margin", "0px");
person David Hedlund    schedule 08.01.2010
comment
Спасибо за вашу помощь, очень признателен, к сожалению, это не сработало. - person mtwallet; 08.01.2010

arrow_upward
7
arrow_downward

nth-child также не имеет индекса 0. Имейте это в виду, если вы привыкли индексировать на 0.

person Boris Lutskovsky    schedule 15.07.2010
comment
Это действительно полезно... спасибо! - person Nitin Bansal; 18.04.2013

arrow_upward
3
arrow_downward

Ваш селектор :nth-child не ссылается на n, и вам нужно сослаться на внутренний div в селекторе.

Пытаться:

$(document).ready(function(){
  $("div.entry div:nth-child(3n)").css("margin", "0px");
});
person Dominic Rodger    schedule 08.01.2010
comment
Извините - только что заметил, что ваш селектор тоже был неправильным. Вам по-прежнему нужен 3n, а не только 3, но вам также нужно поставить `div` перед nth-child. Я проверил это, и это работает. - person Dominic Rodger; 08.01.2010
comment
Я все еще не могу заставить это работать, используя предоставленное вами решение. У меня есть div.entry, вложенный в пару других div, может ли это быть причиной? Должен ли я ссылаться на весь путь, то есть div1 › div2 › div.entry div:nthchild(3n)? - person mtwallet; 08.01.2010
comment
Независимо от того, вложен ли он в другие элементы div, вам, конечно же, не нужно ссылаться на весь путь. Есть ли что-то еще, мешающее этим самым внутренним элементам div? Есть ли какие-либо другие элементы div внутри записи, которые вы не хотите затрагивать? Возможно, вы хотите $("div.entry div.box:nth-child(3n)").css("margin", "0px"); - person Dominic Rodger; 08.01.2010
comment
FWIW, я протестировал свое решение с div entry, вложенным внутрь другого, и оно работает нормально. - person Dominic Rodger; 08.01.2010
comment
@Dominic: Еще раз спасибо за помощь. Я только что попробовал запустить эту простую строку $(div.entry).addClass(test); и это не работает. У меня должно быть что-то конфликтующее, но я понятия не имею, что, поскольку я удалил все остальные JQuery (кроме самой библиотеки). - person mtwallet; 08.01.2010

arrow_upward
1
arrow_downward

Попробуйте этот селектор:

div.entry > div.box:nth-child(3n)
person Gumbo    schedule 08.01.2010