Question

I have multiple divs where I want to take their content and place it inside other div’s that have the same ID. Here’s my example HTML

<!-- Div to get content from -->
<div id="sharedContent">
    <div id="testContent">
        <p>Here is some content</p>
    </div>

    <div id="testContent2">
        <p>Here is some second content</p>
    </div>
</div>

<!-- Divs to put content in -->
<div id="testContent" class="shared">
   test content
</div>​

<div id="testContent2" class="shared">
   test content2
</div>​

And heres my Jquery:

var contentID = ('#' + $(this).attr('id'));
var sharedContent = $('#sharedContent' + ' ' + contentID).html();

$('div.shared').each(function(){
    $(contentID).html(sharedContent);
});

Howoever, this is not working. Any help would be appreciated.

Answer 1

An ID can only use once, so I think that’s the problem. See this fiddle, it solves your problem.

Here is the HTML:

<!-- Div to get content from -->
<div id="sharedContent">
    <div id="testContent">
        <p>Here is some content</p>
    </div>

    <div id="testContent2">
        <p>Here is some second content</p>
    </div>
</div>

<!-- Divs to put content in -->
<div data-id="testContent" class="shared">
</div>

<div data-id="testContent2" class="shared">
</div>​

Here is the JQuery code:

$('div.shared').each(function() {
    var sharedContent = $('#'+$(this).attr('data-id')).html();
    $(this).html(sharedContent);
});​