Как указано в справке
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>
$("span:nth-child(2)")
- код не срабатывает = почему вы решили, что не срабатывает? какой ожидался результат?