Matching cloning values from divs with ids onto divs with matching data name

Question

Here's the logic I am trying to accomplish:

If

the id="" of an element matches the data-attribute="" of another element

Then

.clone the value of the element with said id="" and append it to the element with said data-attribute=""

In practice the code would transform as follows:

Before

    <div style="display:none" id="1">something</div>
    <div data-attribute="1"></div>

    <div style="display:none" id="2">stuff</div>
    <div data-attribute="2"></div>

After

    <div style="display:none" id="1">something</div>
    <div data-attribute="1">something</div>

    <div style="display:none" id="2">something</div>
    <div data-attribute="2">stuff</div>

Where I fall short: I can't automate the process. I can only find an element by addressing a specific id and then .clone that information onto another element.

Current Code: http://jsfiddle.net/jTLnH/1/

Answer 1

I may have misunderstood, but I think you're trying to do the following:-

// loop over all divs which have an id
$('div[id]').each(function() {

  // create a selector matching the div id with the data-attribute
  var $divData = $('div[data-attribute="' + this.id + '"]');

  // if it exists, set the text
  if ($divData.length) {
    $divData.text( $(this).text() );
  }

});

Here's a fiddle