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

Question

我有一个<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、名称和标题的顺序。在

上尝试了 .each 但没有成功。知道如何做到这一点吗？

Answer 1

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

$('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