JQuery .insertAfter не работает в этом примере - почему?

Question

Я не уверен, почему мой код jquery не работает. Я создаю тему Wordpress для моей компании, и я не могу заставить работать функцию .insertAfter (). Он просто удаляет весь контент на странице.

<div class='entry'>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>

JQuery Раздел:

$('.entry:first-child').insertAfter($('.entry:last-child'));

Есть идеи?

Answer 1

Ваш .entry:first-child выбирает сам div, когда я думаю, что он должен выбрать первый ul.Итак, вы пытаетесь вставить элемент за собой, что не работает.

console.log($('.entry:first-child')[0] == $('.entry:last-child')[0]); // true

Попробуйте это ...

$('.entry ul:first-child').insertAfter('.entry ul:last-child');

jsFiddle .

Вы также можете видеть, что можете просто передать строку селектора в insertAfter, вам не нужно снова оборачивать ее с помощью $().

Answer 2

Это должно работать:

$('.entry ul:first-child').insertAfter($('.entry ul:last-child'));

http://jsbin.com/ihihi4/5

Как указал Алекс, вы могли бы использовать другой селектор в вызове .insertAfter вместо объекта jquery.

Документация jquery отлично подходит для объяснения этого:

http://api.jquery.com/insertAfter/

Обратите внимание на небольшую разницу между insertAfter и after.

То же самое относится к insertBefore / before и appendTo и append.Полезно понимать различия.

Answer 3

У него странное название, так как это не «найти элемент с классом« запись », а затем выбрать его первого потомка».Документация jQuery гласит: «[Первый ребенок] выбирает все элементы, которые [сами по себе] являются первыми дочерними элементами их родителей».Который в этом случае ваш div.entry.