Странное поведение jQuery .insertAfter (полностью портит структуру DOM)

#jquery #html

#jquery #HTML

Вопрос:

Понятия не имею, почему, но

 if ($(this).find(':nth-child(2)').is("span")) {
    var moveForward = $(this).find(".postInfo.forVideo");
$(this).find(':nth-child(2)').insertAfter(moveForward);

}

В основном делает то, что должен, но это также изменяет порядок многих других вещей. Как будто действительно очень странно.

Сложно продемонстрировать это с помощью вставленного кода, я думаю, просто визуально вы сможете увидеть странность:

До
введите описание изображения здесь
после

Как вы можете видеть, он почти случайным образом извлекает элементы из div «postInfo forVideo». Вы можете увидеть это здесь (на данный момент, поскольку этот сайт находится в разработке) здесь: http://syndex.me .

Например, зачем ему извлекать элемент polygon, который находится в div «pagecurl», а затем выбрасывать его после диапазона, с которым я работаю? Так странно!

1. вы должны проверить moveForward . длина> 0 перед вставкой после нее. Также подумайте о том, чтобы обернуть ваш $(this) в переменную, чтобы вы не переносили его 3 раза и, возможно, не испортили свой контекст.

Ответ №1:

nth-child выберет все элементы, которые являются вторыми дочерними элементами их соответствующего родителя. Вероятно, вам просто нужен второй дочерний элемент элемента.

 var secondChild = $(this).children().eq(2);
if (secondChild.is("span")) {
    var moveForward = $(this).find(".postInfo.forVideo");
    secondChild.insertAfter(moveForward);