Question

我正在网站上工作，我有这样的HTML代码

<p class="thumb-1"></p>
<p class="thumb-2"></p>
<p class="thumb-3"></p>
<p class="thumb-4"></p>
<p class="thumb-5"></p>
<p class="thumb-6"></p>
<p class="thumb-7"></p>
<p class="thumb-8"></p>

<div class="new new-1"></div>
<div class="new new-2"></div>
<div class="new new-3"></div>
<div class="new new-4"></div>

所以，我想把<p>放到像这样的div中

<div class="new new-1">
 <p class="thumb-1"></p>
 <p class="thumb-5"></p>
</div>
<div class="new new-2">
 <p class="thumb-2"></p>
 <p class="thumb-6"></p>
</div>
<div class="new new-3">
 <p class="thumb-3"></p>
 <p class="thumb-7"></p>
</div>
<div class="new new-4">
 <p class="thumb-4"></p>
 <p class="thumb-8"></p>
</div>

我试试这个：

$("p").each(function() {
    $('.new').append($this);
});

但我不知道如何切换到.new-1然后.new-2等。 ..

感谢您的帮助！

Answer 1

您可以使用each()，append()和eq()来完成此操作。

var p = $('p[class^="thumb-"]');

$('.new').each(function (i) {
    $(this).append([p.eq(i), p.eq(i + 4)]);
});

div {
    border:1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="thumb-1">thumb-1</p>
<p class="thumb-2">thumb-2</p>
<p class="thumb-3">thumb-3</p>
<p class="thumb-4">thumb-4</p>
<p class="thumb-5">thumb-5</p>
<p class="thumb-6">thumb-6</p>
<p class="thumb-7">thumb-7</p>
<p class="thumb-8">thumb-8</p>

<div class="new new-1"></div>
<div class="new new-2"></div>
<div class="new new-3"></div>
<div class="new new-4"></div>

Answer 2

工作演示

＆＃13;

$(document).ready(function(){
    $("p").each(function(){
        var num = $(this).attr('class').split('-')[1]
        var rem = num % 4;
        if(rem > 0){
          $('.new-'+rem).append($(this)) 
        }
        else{
          $('.new-4').append($(this)) 
        }
    });
});

＆＃13;

.new{
  border:1px solid red
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="thumb-1">1</p>
<p class="thumb-2">2</p>
<p class="thumb-3">3</p>
<p class="thumb-4">4</p>
<p class="thumb-5">5</p>
<p class="thumb-6">6</p>
<p class="thumb-7">7</p>
<p class="thumb-8">8</p>

<div class="new new-1"></div>
<div class="new new-2"></div>
<div class="new new-3"></div>
<div class="new new-4"></div>

＆＃13;

Answer 3

这也可以使用items运算符完成，如下所示：

<强> jQuery的：

deleted

<强>输出：

var path = require('path');
var webpack = require('webpack');

module.exports = {
entry: [
      path.resolve(__dirname, 'master/jsx/App')
    ],
    output: {
        path: path.resolve(__dirname, 'build'),
        publicPath: '/dist/',
        filename: 'app.bundle.js'
    },
    cache: false,
    devtool: 'sourcemap',
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"production"'
        }),
        new webpack.optimize.UglifyJsPlugin({
            compressor: {
                warnings: false
            }
        })
    ],
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/
        }, {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react'],
                compact: false
            }
        }, {
            test: /\.css$/,
            loader: "style-loader!css-loader"
        }, {
            test: /\.woff|\.woff2|\.svg|.eot|\.ttf/,
            loader: 'url?prefix=font/&limit=10000'
        }]
    }
};

看到它在这个JS小提琴中工作：https://jsfiddle.net/igor_9000/g219zjah/

希望有所帮助。

Answer 4

你必须使用以下jquery

$('.thumb-1, .thumb-5').wrapAll('<div class="new new-1"></div>');

这会将.thumb-1和.thumb-5添加到新的新-1中。

并且与其他元素类似地使用

Answer 5

试试这个

$(document).ready(function(){
$('.new').each(function(index,elem){
    $(this).append($('p.thumb-'+(index+1)));
  $(this).append($('p.thumb-'+(index+5)));
});

});

将<p>插入div Jquery

5 个答案: