Инкапсулируйте ряд отделений с другим отделением в jQuery
Я немного озадачен с тем, как сделать это.
Я использую jQuery и желание инкапсулировать определенные наборы отделений с отделением.
Например, я имею:
<div id="groups">
<div class="group-1">x</div>
<div class="group-1">x</div>
<div class="group-2">x</div>
<div class="group-2">x</div>
<div class="group-3">x</div>
</div>
И желание закончиться с:
<div id="groups">
<div id="set-1">
<div class="group-1">x</div>
<div class="group-1">x</div>
</div>
<div id="set-2">
<div class="group-2">x</div>
<div class="group-2">x</div>
</div>
<div id="set-3">
<div class="group-3">x</div>
</div>
</div>
Я могу циклически повториться через каждое отделение и добавить отделение вокруг каждого, но не способа, которым я хочу выше. Любой совет ценит.
Спасибо.
2 ответа
См. .wrapAll()
$(".group-1").wrapAll('<div id="set-1" />');
$(".group-2").wrapAll('<div id="set-2" />');
$(".group-3").wrapAll('<div id="set-3" />');
Если вам нужно, чтобы селектор соответствовал классам только внутри div #groups, используйте дочерний селектор, например, $('#groups > .group-1')
Если вам нужно более общее решение, например вы не знаете количество групп (чаще в моем случае), вы можете сделать что-то вроде этого:
var groups = {};
$("#groups div").each(function(i) {
var c = $(this).attr("class");
if(!groups[c]) groups[c] = [];
groups[c].push(this);
});
for(var i in groups) {
$(groups[i]).wrapAll("<div id='" + i.replace('group', 'set') +"' />");
}
Вы можете просмотреть демонстрацию здесь , это будет работать с любым количеством групп- X , который может находиться внутри #groups , что делает его немного более гибким. Если вы можете изменить свою разметку, вы можете сделать это проще, но я предполагаю, что если бы это был вариант, вы бы вообще не задавали этот вопрос :)