jquery each loop write data for each div

Question

I hope this makes sense. I have an onclick and I am trying to write this data for each div with this.

    jQuery('.circle_counter_div').each(function() {
       var tagtext = '[circlecounter rel="' + jQuery('.circle_size').val() + '"][/circlecounter]';
    })

I am cloning items but I can only write the data for one of them. How do I write data for each cloned item?

So with the above example I want tagtext to equal

[circlecounter rel="' + jQuery('.circle_size').val() + '"][/circlecounter]
[circlecounter rel="' + jQuery('.circle_size').val() + '"][/circlecounter]
[circlecounter rel="' + jQuery('.circle_size').val() + '"][/circlecounter]

Full Code HTML

<div class="sc_options circle_counter_div" id="clone_this" style="display: block;"> 
  <input type="text" class="circle_size"/>
</div>
<div class="sc_options circle_counter_div" id="clone_this" style="display: block;"> 
  <input type="text" class="circle_size"/>
</div>
<div class="sc_options circle_counter_div" id="clone_this" style="display: block;"> 
  <input type="text" class="circle_size"/>
</div>
<input type="submit" class="sc_options circle_counter_div" id="insert" name="insert" value="<?php _e("Insert", 'themedelta'); ?>" onClick="insertcirclecountershortcode();" style="display:none"/>

Script

// Insert the column shortcode
function insertcirclecountershortcode() {

    var tagtext;
    var start;
    var last;

    var start = '[circlecounters]';
    var last = '[/circlecounters]';

    jQuery('.circle_counter_div').each(function() {
       var tagtext = '[circlecounter rel="' + jQuery('.circle_size').val() + '"][/circlecounter]';
    })

    var finish = start + tagtext + last;

    if (window.tinyMCE) {
        window.tinyMCE.execInstanceCommand(window.tinyMCE.activeEditor.id, 'mceInsertContent', false, finish);
        //Peforms a clean up of the current editor HTML.t
        //tinyMCEPopup.editor.execCommand('mceCleanup');
        //Repaints the editor. Sometimes the browser has graphic glitches.
        tinyMCEPopup.editor.execCommand('mceRepaint');
        tinyMCEPopup.close();
    }
    return;
}

But, there cannot be more than one element with a given id. Furthermore, what do you expect your each loop to do? — Serabe
– Serabe, Commented Jan 28, 2014 at 1:06
Using a class doesn't make a difference in this scenario... I updated it using the class. Still doesn't work. — Bowenac
– Bowenac, Commented Jan 28, 2014 at 1:14
You need to provide more code, or a jsFiddle showing the scenario. — cgatian
– cgatian, Commented Jan 28, 2014 at 1:14

cgatian · Accepted Answer · 2014-01-28 01:18:31Z

1

Extended Answer: After some more information was provided perhaps you're just missing the index and value properties on the loop. Its hard to tell, since little sample code is provided.

$('.test').each(function(i,v) {
   var tagtext = $(v).html();
    console.log(tagtext);
})

http://jsfiddle.net/4xKvh/

Original Answer:

Use use classes instead of an Id. Id's are only suposed to be used once on a page.
Since there should only be one occurance jQuery is filtering the result down to 1, even though the markup may have multiple elements with that Id on the page. This is to make use of the built-in browser function getElementById().

For proof checkout this jsFiddle

Using the class attribute is more appropriate for what you're trying to do.

jQuery('.clone_this').each(function() {
   var tagtext = '[something][/something]';
})

And the markup:

<div class="clone_this"></div>

This will allow jQuery to return an array of elements like you're looking for

edited Jan 28, 2014 at 1:18

answered Jan 28, 2014 at 1:09

cgatian

23.1k9 gold badges60 silver badges77 bronze badges

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

1 Comment

Bowenac Over a year ago

Yea that was a mistake, I updated it with a class. Still have the same question as using the class doesnt make a difference. It still comes back as undefined for the data.

Bowenac · Accepted Answer · 2014-01-28 03:11:30Z

0

This is what I needed... Finally got it working.

tagtext = ' ';

jQuery('#circle_counter_div .circlecounter').each(function() {
    tagtext += '[circlecounter rel="' + jQuery('.circle_size').val() + '" datathickness="' + jQuery('.circle_thickness').val() + '" datafgcolor="' + jQuery('.circle_color').val() + '" text="' + jQuery('.circle_text').val() + '" fontawesome="' + jQuery('.font_awesome_icon').val() + '" fontsize="' + jQuery('.circle_font_size').val() + '"][/circlecounter]';
});

var start = '[circlecounters]';
var last = '[/circlecounters]';
var finish = start + tagtext + last;

answered Jan 28, 2014 at 3:11

Bowenac

5039 silver badges20 bronze badges

Collectives™ on Stack Overflow

jquery each loop write data for each div

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related