Изменение тегов, содержащих только тег в

#javascript #jquery

Вопрос:

У меня следующая структура html

 <ul>
<li> 
    Text <label>1#</label> <input type="text" value="" />
</li>
    <li> 
    Text <label>2#</label> <input type="text" value="" />
</li>
    <li> 
    Text <label>3#</label> <input type="text" value="" />
</li>
    <li> 
    Text <label>4#</label> <input type="text" value="" />
</li>
    <li> 
    Text <label>5#</label> <input type="text" value="" />
</li>
<li> 
  <label>6#</label> 
</li>
   <label>7#</label> <input type="text" value="" />
</li>  
</ul>

Мне нужно разбить эту структуру, начиная <ul> с li, которая имеет только <label> внутренний тег. Конечным результатом будет следующее

 <ul>
    <li>Text
        <label>1#</label>
        <input type="text" value="" />
    </li>
    <li>Text
        <label>2#</label>
        <input type="text" value="" />
    </li>
    <li>Text
        <label>3#</label>
        <input type="text" value="" />
    </li>
    <li>Text
        <label>4#</label>
        <input type="text" value="" />
    </li>
    <li>Text
        <label>5#</label>
        <input type="text" value="" />
    </li>
</ul>

<!-- DIVIDE -->
<ul>
    <li>
        <label>6#</label>
    </li>
    <li>
        <label>7#</label>
        <input type="text" value="" />
    </li>
</ul>

Я пытаюсь использовать некоторую комбинацию .replace(); , дальнейшие попытки не сработали. Возможно ли это сделать?

ДЕМОНСТРАЦИОННЫЙ КОД

1. Конечно. Что вы пробовали?

2. Каждый label из них должен быть связан с соответствующими входными данными либо путем размещения входных данных внутри label атрибута, либо с использованием for атрибута. Смотрите здесь .

3. @isherwood Мой код jsfiddle.net/JoaoFelipePego/FGJLg/2

Ответ №1:

Вот мое решение:

 $("ul>li:not(:has(:not(label)))").each(function() {
    var li = $(this);   
    var newUl = $(document.createElement("ul"));
    li.parent().after(newUl);
    li.nextAll("li").andSelf().appendTo(newUl);
});

Это работает с несколькими разделителями.

Вот скрипка: http://jsfiddle.net/LucasTrz/hWjLB /

Ответ №2:

Несколько неясно, каков желаемый результат, а также обратите внимание, что ваш HTML не работает: отсутствует открывающий li тег для элемента #7. Итак, предположим, что вы хотите удалить первый li , у которого нет input и все li элементы после него, и поместить эти li элементы в отдельный(новый) ul , вот код:

 var x = $('<ul>').insertAfter('ul');
var y = $('ul li:not(:has(>input))');
var z = $(y).nextAll();
$(y).appendTo(x);
$(z).appendTo(x);

Скрипка: http://jsfiddle.net/FGJLg/3 /

Ответ №3:

Я бы предложил:

 // select all the label elements:
$('label')
// filter that collection:
.filter(function () {
    // keeping only those 'label' elements that have no siblings:
    return $(this).siblings().length === 0;
})
// moving to the closest ancestor 'li' elements of those 'label' elements:
.closest('li')
// adding a specific class (for the next part):
.addClass('labelOnly')
// selecting all elements that follow, until another element with the added
// class-name is found:
.nextUntil('li.labelOnly')
// adding the original 'li' back to the selection:
.addBack()
// wrapping those 'li' elements in a 'ul':
.wrapAll('<ul></ul>')
// 'wrapAll()' returns the original (wrapped) elements, we use 'parent()'
// to get to the 'ul':
.parent()
// and append it to the body:
.appendTo('body');

Демонстрация скрипки JS.

Ссылки:

Ответ №4:

 $('li:not(:has(> input))').each(function () {
    var myList = $(this).parent('ul');
    var myEls = $(this).nextAll('li').andSelf();
    myEls.remove();
    myList.after(myEls);
    myEls.wrapAll('<ul>');
});

http://jsfiddle.net/isherwood/asn4L