更改主父元素内的子div的顺序

时间:2012-05-24 14:27:58

标签: jquery

我有<ul>看起来像这样

<ul class="class_1 class_2">
    <li class="class1">
        <div class="submission_list_item">
            <div class="sub_list_item_content modal_link" href="url here">
                <div class="facebook_user" style="display:none;"></div>
                <div class="submission_response ">
                    <label></label>
                    <span class="MediaUploadResponse"><img alt="Sample_mpeg4" src="url here"></span> </div>
                <div class="submission_response name">
                    <label>NAME:</label>
                    <span class="Response"></span> </div>
                <div class="submission_response last_name">
                    <label>LAST NAME</label>
                    <span class="Response"></span> </div>
                <div class="submission_response description">
                    <label>DESCRIPTION:</label>
                    <span class="Response"> Test </span> </div>
                <div class="submission_response video_title">
                    <label>VIDEO TITLE:</label>
                    <span class="Response"> Video </span> </div>
            </div>
        </div>
    </li>
    <li class="class1">
        <div class="submission_list_item">
            <div class="sub_list_item_content modal_link" href="url here">
                <div class="facebook_user" style="display:none;"></div>
                <div class="submission_response ">
                    <label></label>
                    <span class="MediaUploadResponse"><img alt="Sample_mpeg4" src="url here"></span> </div>
                <div class="submission_response name">
                    <label>NAME:</label>
                    <span class="Response"></span> </div>
                <div class="submission_response last_name">
                    <label>LAST NAME</label>
                    <span class="Response"></span> </div>
                <div class="submission_response description">
                    <label>DESCRIPTION:</label>
                    <span class="Response"> Test </span> </div>
                <div class="submission_response video_title">
                    <label>VIDEO TITLE:</label>
                    <span class="Response"> Video </span> </div>
            </div>
        </div>
    </li>
</ul>

我要做的是交换2个div的顺序,名称与每个&lt;李&GT;我页面上的项目。尝试过.each on&lt;李&s;但没有运气。知道怎么做吗?

1 个答案:

答案 0 :(得分:3)

我认为你需要这样的东西:

$('ul.class_1 li.class1').each(function() {
  var name = $(this).find('div.name');
  var video_title = $(this).find('div.video_title');
  name.insertAfter($('div.description', this));
  video_title.insertBefore($('div.last_name', this));
});

<强> DEMO