используя jquery для группировки элементов - PullRequest
3 голосов
/ 15 июня 2009

У меня есть целая куча элементов, которые мне нужно сгруппировать, но, поскольку это происходит из-за какого-то механизма, который я не могу изменить, мне нужно сделать это с помощью jquery (с которым я довольно хорошо знаком основы)

По сути, у меня есть множество р-тегов и элементов div внутри элемента формы (да, плохая разметка, но это другая история). Мне нужно сгруппировать теги p со следующими одним или двумя div внутри набора полей.

Я пытался вставить fieldset close и затем начинать тег перед каждым элементом p, но я думаю, что механизм, который его сортирует, хочет вставить допустимые элементы, так что это не работает

Ответы [ 2 ]

7 голосов
/ 15 июня 2009

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

<p>paragraph 1</p>
<div>par1 div1</div>
<div>par1 div2</div>
<p>paragraph 2</p>
<div>par2 div1</div>
<div>par2 div2</div>
<p>paragraph 3</p>
<div>par3 div1</div>
<p>paragraph 4</p>
<div>par4 div1</div>

И вы хотите получить что-то вроде этого:

<fieldset>
 <p>paragraph1</p>
 <div>par1 div1</div>
 <div>par1 div2</div>
</fieldset>
<fieldset>
 <p>paragraph2</p>
 <div>par2 div1</div>
 <div>par2 div1></div>
</fieldset>
.....

Если это так, то этот фрагмент кода jQuery поможет:

$(function(){   
    $('p').each(function(index,item){
      var nextDiv = $(item).next();
      var followingDiv = $(nextDiv).next('div');
      $(item).wrap("<fieldset id='fieldset" + index + "'></fieldset>");
      $("#fieldset"+index).append(nextDiv).append(followingDiv);
    });
});
1 голос
/ 20 января 2014

@ Ответ Хосе Басильо можно немного упростить и обобщить:

var $wrapper = $('#wrapper');
$wrapper.children('p').each(function(index,item) {
    var $following = $(item).nextUntil('p, fieldset');
    $wrapper.append($('<fieldset>').append(item, $following));
});

Демо

Код преобразует

<div id="wrapper">
    <p>paragraph 1</p>
        ... (whatever but p or fieldset)
    <p>paragraph 2</p>
        ... (whatever but p or fieldset)
    ... (p followed by whatever but p or fieldset)
</div>

в

<div id="wrapper">
    <fieldset>
        ... (whatever but p or fieldset)
    </fieldset>
    <fieldset>
        ... (whatever but p or fieldset)
    </fieldset>
    ... (fieldset containg [p followed by whatever but p or fieldset])
</div>

Если кто-то предпочитает более короткий код, чем читабельность, нет необходимости использовать переменную $following:

var $wrapper = $('#wrapper');
$wrapper.children('p').each(function(index,item) {
    $wrapper.append($('<fieldset>').append( item, $(item).nextUntil('p, fieldset') ));
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...