2

Имеется html код вида

<div>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<span></span>
<p></p>
<p></p>
<p></p>
<p></p>
<span></span>
</div>

Провожу выборку вот так

$("span:nth-child(2)")

код не срабатывает. Как правильно производить выборку в jQuery?

4
  • какие именно из спанов тут ожидается быть выбранным?
    – Grundy
    19 апр 2016 в 11:57
  • К примеру как выбрать 1-ый? и как выбрать 2-ой?
    – asd
    19 апр 2016 в 12:02
  • в вопросе написано $("span:nth-child(2)") - код не срабатывает = почему вы решили, что не срабатывает? какой ожидался результат?
    – Grundy
    19 апр 2016 в 12:09
  • $("span:nth-of-type(2)")
    – soledar10
    19 апр 2016 в 12:34

4 ответа 4

4

Я думаю вы имели в виду $('span').eq(2)

4
  • 1
    только 1 - счет от нуля
    – splash58
    19 апр 2016 в 12:30
  • 2
    или так $("span:eq(1)") или так $("div span:eq(1)")
    – splash58
    19 апр 2016 в 12:31
  • @splash58 Я не знал что так можно.. теперь буду еще хуже относиться к жыквере
    – Darth
    19 апр 2016 в 12:50
  • я не хотел испортить ваши отношения :)
    – splash58
    19 апр 2016 в 12:53
1

$('span > p:nth-child(2)').html("hi!");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <a href=""></a>
    <a href=""></a>
    <a href=""></a>
    <span>
        <p>first</p>
        <p>second</p>
        <p>last</p>
    </span>
    <hr />
    <span>
        <p>first</p>
        <p>second</p>
        <p>last</p>
   </span>
</div>

4
  • nth-child не зависит от дочерних элементов элемента к которому применяется. Собственно даже в примере у p нет дочерних элементов
    – Grundy
    19 апр 2016 в 12:39
  • @Grundy, ну о чём же вы. span в вопросе пуст. Деток у него нет от слова совсем. Как следствие селектор $("span:nth-child(2)") ведёт в никуда. 19 апр 2016 в 12:41
  • 1
    Неа :-) это запрос ведет в никуда, так как нет спана, который был бы вторым ребенком, а не потому что у него нет детей
    – Grundy
    19 апр 2016 в 12:43
  • @Grundy всё верно. я с какого-то перепугу для себя решил, что речь идёт о spam > p. 19 апр 2016 в 12:49
0

Например у нас имеется такая разметка:

<table>
<tr>    
    <td>FirstName</td>
    <td name="firstName"> Urmuz</td>
</tr>
<tr>    
    <td>LastName</td>
    <td name="lastName"> 24</td>
</tr>
</table>

Выборка по данной схеме:

$('td[name=firstName]') // соответствует 'firstName'
$('td[name^=firstName]') // значения, которые начинаются с 'firstName'
$('td[name*=firstName]') // значения, который содержат 'firstName'

Думаю данные пример вы сможете применить для своей задачи. Удачного кодинга...

0

Как указано в справке

nth-child выбирает элементы, которые являются n-ми детьми.

Для вашей разметке ни один элемент не имеет вторым ребенком спан, поэтому селектор возвращает 0 элементов.

В приведенном примере, первый спан - является 4 ребенком по счету.

$('span:nth-child(4)').text("hi, i'm fourth span")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href="">1</a>
  <a href="">1</a>
  <a href="">1</a>
  <span>1</span>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <span>1</span>
</div>

В качестве альтернативы можно использовать селектор :eq, либо функцию eq(). Важное отличие этих функций - отсчет индексов начинается с 0.

Либо nth-of-type

$('span:nth-of-type(1)').text("hi, i'm first");
$('span:eq(1)').text("hi, i'm second");
$('span').eq(2).text("hi, i'm third");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>1</span>
  <span>1</span>
  <span>1</span>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.