如何将元素移到下一个兄弟姐妹？

Question

I'm trying to grab an element and move it to its next sibling while at the same time adding attributes to that next sibling. How do I do that in jQuery?

Specifically, I want to move the "span" inside the "a" tags below, and add an "data-toggle='tooltip'" and 'title="SOMETHING HERE"' attributes to that "a" tag.

Thus this:

<td>
  <span>Total partners</span>
  <a id="answer_view_2_list_row_7"></a>
</td>

would become this:

<td>
  <a id='answer_view_2_list_row_7' data-toggle='tooltip' title='SOMETHING HERE'>
    <span>Total partners</span>
  </a>
</td>

Any help appreciated. I'm learning jQuery but this one is beyond me.

Answer 1

It would be something like:

// Append to `a` tag.
$('span').appendTo('a');
// Add attributes.
$('a').attr({
    'data-toggle':'tooltip',
    'title':'SOMETHING HERE'
});

Or better yet:

$('span').each(function() {
    $(this).next().attr({
        'data-toggle':'tooltip',
        'title':'SOMETHING HERE'
    });
    $(this).appendTo($(this).next());
});

Fiddle

Answer 2

$('td a').append(function () {
    return $(this).parent().find('span')
}).data('toggle', 'tooltip').attr('title', 'SOMETHING HERE')

jsFiddle example

Note that you won't see the data attribute in the source as it's stored internally.

Answer 3

$('td > a').attr({
    'data-toggle': 'tooltip',
    'title': 'something here'
}).append($('td > span'));

Answer 4

尝试这样的事情：

$('myelement').each(function() { $(this).appendTo($(this).next()); });