在每个父 div 中将子 div 移动到另一个子 div 上方答案

【问题标题】：Moving child div above another child div in each parent div在每个父 div 中将子 div 移动到另一个子 div 上方
【发布时间】：2014-06-14 07:02:55
【问题描述】：

使用 :contains()，我试图定位每个父 div 中的特定子 div，并将其移动到 (insertBefore) 所有其他子 div 之上。

<div class="roomRateRoomType">
    <div class="rateListing roomsView">
        <div class="rateTypeLineItems">

            <!-- Non-Best Flex Rate -->
            <div class="regularRates roomsView"> <span>Advance Saver Rate & Deals</span>

                <p>Lorem Ipsum.</p>
            </div>

            <!-- Best Flexible Rate -->
            <div class="regularRates roomsView">
                <div class="upsellHeader"> <span class="groupHeader">Best Flexible Rate &amp; Deals</span>

                    <p>Lorem Ipsum.</p>
                </div>
            </div>

        </div>
    </div>

    <div class="rateListing roomsView">
        <div class="rateTypeLineItems">

            <!-- Non-Best Flex Rate -->
            <div class="regularRates roomsView"> <span>Some Other Advance Saver Rate & Deals</span>

                <p>Lorem Ipsum.</p>
            </div>

            <!-- Best Flexible Rate -->
            <div class="regularRates roomsView">
                <div class="upsellHeader"> <span class="groupHeader">Best Flexible Rate &amp; Deals</span>

                    <p>Lorem Ipsum.</p>
                </div>
            </div>

        </div>
    </div>

    <div class="rateListing roomsView">
        <div class="rateTypeLineItems">

            <!-- Non-Best Flex Rate -->
            <div class="regularRates roomsView"> <span>And One More Advance Saver Rate & Deals</span>

                <p>Lorem Ipsum.</p>
            </div>

            <!-- Best Flexible Rate -->
            <div class="regularRates roomsView">
                <div class="upsellHeader"> <span class="groupHeader">Best Flexible Rate &amp; Deals</span>

                    <p>Lorem Ipsum.</p>
                </div>
            </div>

        </div>
    </div>    
</div>
<!-- */ END .roomRateRoomType -->

//move each Best Flex div above all siblings
$('.regularRates.roomsView').each(function() {
    $('.regularRates.roomsView:contains("Best Flexible Rate")').insertBefore('.regularRates.roomsView:eq(0)');
});

这是我的fiddle。我明白为什么我的目标孩子会被移到 first 父母的顶部。如何让我的脚本将每个子项保留在其相对父项中？

感谢您的帮助！

【问题讨论】：

标签： jquery

【解决方案1】：

试试：

$('.rateTypeLineItems').each(function () {
    $(this).find('.regularRates.roomsView:contains("Best Flexible Rate")').prependTo(this);
});

jsFiddle example

【讨论】：

顺便说一句，我采用了一种稍微不同的方法，即定位与所讨论的孩子同义的值属性。 $('.rateTypeLineItems').each(function() { $(this).find('.regularRates.roomsView').has(':input[value="IGCOR"]').prependTo(this); });