jQuery - .prepend() for each element in list of input's?

Question

Is it possible to use prepend for each element in a list of input's within a form? The prepend below only prepends the first element - is it possible to prepend the label for all items:

<script>
$(document).ready(function(){
    $("#sg1").each(function(){
        $(this).prepend("<label for=\""+$(this).attr("id")+"\">"+$(this).attr("id")+"</label>");
    });
});
</script>
<form id="sg1">
    <input name="member1" id="member1" value="jack" />
    <input name="member2" id="member2" value="carter" />
    <input name="member3" id="member3" value="jackson" />
    <input name="member4" id="member4" value="tielk" />
</form>

http://jsfiddle.net/RM5wG/

updated snippet - it is such a pain to enter in tags on stackoverflow... a smart str_replace on < would do some good — ina
– ina, Commented Aug 11, 2010 at 23:00
Indent the code block four spaces instead of using <pre><code>. — strager
– strager, Commented Aug 11, 2010 at 23:16
then you'd have to put four spaces in front of each line of the code... — ina
– ina, Commented Aug 11, 2010 at 23:27

Nick Craver · Accepted Answer · 2010-08-11 23:11:19Z

7

You need to loop through the inputs instead of the form, and use something like .insertBefore() instead, like this:

$("#sg1 input").each(function(){
  $('<label for="'+ this.id +'">' + this.id + '</label>').insertBefore(this);
});

You can give it a try here

.prepend() inserts an element as the first child, but an <input> doesn't get children, if you want it before use .insertBefore() to place it before the element you pass to .insertBefore() :)

answered Aug 11, 2010 at 23:11

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

strager Over a year ago

You can also swap and use .before, IIRC.

Nick Craver Over a year ago

@strager - Yep that'd work the other way around, ideally you'd do $('<label />', {for: this.id, id: this.id }).insertBefore(this) if doing many elements, that's the reasoning for leaving it .insertBefore(), in case the OP incorporates his previous question as well :)

strager Over a year ago

Ah, okay. But your comment says id: this.id, which looks wrong. (I'm not familiar with the initializing jQuery syntax (whatever it's called.)

Nick Craver Over a year ago

@strager - Oops you're right, thinking of a previous question, for this it'd be $('<label />', { 'for': this.id, text: this.id }), (for needs quotes since it's a keyword), you can give it a try here: jsfiddle.net/3JQp9

poezn · Accepted Answer · 2010-08-11 23:19:29Z

1

You just need to change the selector to the input elements within the #sg1 div:

<script>
$(document).ready(function(){
    $("#sg1 input").each(function(){
        $(this).before(""+$(this).attr("id")+"");
    });
});
</script>
<form id="sg1">
    <input name="member1" id="member1" value="jack" />
    <input name="member2" id="member2" value="carter" />
    <input name="member3" id="member3" value="jackson" />
    <input name="member4" id="member4" value="tielk" />    
</form>

edited Aug 11, 2010 at 23:19

answered Aug 11, 2010 at 23:00

poezn

4,1694 gold badges29 silver badges27 bronze badges

1 Comment

poezn Over a year ago

no :) it's before(), not prepend(), since prepend adds the content at the beginning of an element's content, while before adds it... well... before the element

Collectives™ on Stack Overflow

jQuery - .prepend() for each element in list of input's?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related