用两个不同的列包装一些div | 用两个不同的列包装一些div

本文介绍了用两个不同的列包装一些div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有这些div

<div class="content">
<div class="rpost">-115</div>
<div class="lpost">-91</div>
<div class="lpost">-99</div>
<div class="rpost">-181</div>
<div class="lpost">-19</div>
<div class="rpost">-135</div>
<div class="rpost">-85</div>
<div class="lpost">-39</div>
</div>

我想要div的顺序，将lpost包裹在称为left_columns的div中，并将rpost包裹在div的right_columns中.

I want whatever the order of the divs, wrap lpost in a div called left_columns, and rpost in a div right_columns.

 <div class="left_columns">
    <div class="lpost">-91</div>
    <div class="lpost">-99</div>
    <div class="lpost">-19</div>
    <div class="rpost">-85</div>
 </div>
 <div class="right_columns">
    <div class="rpost">-115</div>
    <div class="rpost">-181</div>
    <div class="rpost">-135</div>
    <div class="rpost">-85</div>
 </div>

可以使用石工或同位素和无限滚动法吗?

can use masonry or Isotope and infinite-scroll do this?

推荐答案

在此应使用class而不是id，然后可以使用wrapAll

You should use class instead of id here and then you can use wrapAll

$('.content').each(function() {
  $(this).find(".lpost").wrapAll('<div class="left_columns"></div>')
  $(this).find(".rpost").wrapAll('<div class="right_columns"></div>')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="rpost">-115</div>
  <div class="lpost">-91</div>
  <div class="lpost">-99</div>
  <div class="rpost">-181</div>
  <div class="lpost">-19</div>
  <div class="rpost">-135</div>
  <div class="rpost">-85</div>
  <div class="lpost">-39</div>
</div>

这篇关于用两个不同的列包装一些div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！