2013-08-06 6 views
1

Я наткнулся на функцию wrap() jQuery.jQuerys wrap функция wrap работает довольно нечетно

Как-то он ведет себя иначе, когда я пытаюсь обернуть два тега div, которые имеют некоторый текст между ними, чем без текста между двумя div.

JQuery:

var wrapper1 = '<div class="wrap1">something in between<div class="innerwrap1">'; 
$('.content1').wrap(wrapper1);  
var wrapper2 = '<div class="wrap2"><div class="innerwrap2">'; 
$('.content2').wrap(wrapper2); 

Результирующий HTML заключается в следующем:

<div class="wrap1"> 
    something in between 
    <div class="innerwrap1"></div> <!-- wtf? --> 
    <div class="content1">Lorem</div> 
</div> 
<div class="wrap2"> 
    <div class="innerwrap2"> 
     <div class="content2">Ipsum</div> 
    </div> 
</div> 

Вот скрипку: http://jsfiddle.net/RfJN5/

Первый результат довольно удивительно, не так ли? Я думаю, что оба закрывающих divs должны быть размещены после .content1, независимо от того, существует ли любой текст между div.

Конечно, я знаю, что лучше добавить закрывающие divs для управления поведением, но это какая-то ошибка или просто непонимание того, как использовать обертку jQuery?

Заранее благодарен!

+2

Вы используете неверную разметку в коде генерации HTML. Ожидайте неожиданные результаты. ** Различные браузеры будут интерпретировать недействительную разметку по-разному. ** –

+1

Как и многие другие люди, вы совершенно не понимаете, как работают эти функции. Я подробно рассмотрел его для '.append()' [здесь] (http://stackoverflow.com/questions/15810067/sequence-of-running-code-in-jquery), многие из тех же идей для '.wrap()'. –

+0

@ AnthonyGris вы поможете мне понять, что эти функции анализируют данную строку для создания элементов DOM. – voodoocode

ответ

3

, который работает как ожидалось, ваш wrapper1 будет основным объектом, который будет обернут вокруг content1, и поскольку вы не закрыли innerwrapper1, jquery закрывает его для вас. Если вы хотите, чтобы обернуть с внутренней оболочкой, то сделать это объект, оберните содержимое, а затем добавьте внутреннюю обертку в обертке:

var wrapper1 = $('<div class="wrap1">something in between</div>'), 
    innerWrapper = $('<div class="innerwrap1" />'); 

$('.content1').wrap(innerWrapper);  
wrapper1.append($('.innerwrap1')); 

Example

Смежные вопросы