CODEWITHSUNDEEP
javascriptjqueryhtml
DLeh
DLeh

Reputation: 24395

jQuery select element and next together

I have an auto-generated HTML and I want to group together elements.

Input Html:

<div class="editor-label"><label for="StringField">StringField</label></div>
<div class="editor-field"><input id="StringField" type="text" value="" /></div>

<div class="editor-label"><label for="IntField">IntField</label></div>
<div class="editor-field"><input id="IntField" name="IntField" type="number" value="0" /></div>

<!-- more like above -->

Desired output:

<div class="form-group">
    <div class="editor-label"><label for="StringField">StringField</label></div>
    <div class="editor-field"><input id="StringField" type="text" value="" /></div>
</div>

<div class="form-group">
    <div class="editor-label"><label for="IntField">IntField</label></div>
    <div class="editor-field"><input id="IntField" name="IntField" type="number" value="0" /></div>
</div>

I'm trying to use jQuery's next selector to get those groups, and then wrap them, but I'm having trouble getting the items to select as one to use with wrap(). I'm not sure if I can write a single selector to get this, or if I will need to do it iteratively. Here are some of the selectors I've tried.

//selects just the labels
$('.editor-label')

//returns only the .editor-fields
$('.editor-label +  .editor-field')

//returns all 4 elements separately
$('.editor-label, .editor-label +  .editor-field')

What selector can I use to select the element (.editor-label) and it's next (.editor-field) as one "element"?

Upvotes: 2

Views: 121

Answers (5)

brenjt
brenjt

Reputation: 16297

See if this will work.

var fields = $('.editor-field');
$.each(fields, function(index, obj){
    var field = $(obj);
    var label = field.prev('.editor-label');
    field.wrap('<div class='form-group'></div>').before(label);
});

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206342

Use .each(), .addBack() and .wrapAll()

jsBin demo

$('.editor-label').each(function(){
  $(this).next(".editor-field").addBack().wrapAll("<div class='form-group'/>");
});

.each() will target all the desired elements, inside the callback, find the .next(".editor-field"), addBack the starting selector (the current .editor-label) and wrapAll() inside the desired element

Upvotes: 1

epascarello
epascarello

Reputation: 207527

You are going to need to do the selection in a for each and not with a selector by itself. 

$(".editor-label").each(function() {
    var lab = $(this);
    var inp = $(lab).next();
    lab.add(inp).wrapAll('<div class="wrapper"/>');
});
.wrapper { border: 2px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="editor-label"><label for="StringField">StringField</label></div>
<div class="editor-field"><input id="StringField" type="text" value="" /></div>

<div class="editor-label"><label for="IntField">IntField</label></div>
<div class="editor-field"><input id="IntField" name="IntField" type="number" value="0" /></div>

Upvotes: 4

ianaya89
ianaya89

Reputation: 4233

You can use the jQuery siblings method:

$(".editor-label").siblings(".editor-label")

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196177

Try this

$('.editor-label').each(function(){
   var group = $(this).next().addBack().wrapAll('<div class="form-group"></div>');
});

Upvotes: 2

Related Questions