简体   繁体   English

如何在新的div中包装div?

[英]How to wrap divs inside a new div?

I'm trying to wrap the two divs <div class="cm-cp-title"> and <div class="cm-cp-value"> inside a div called cm-cp-container . 我试图将两个divs <div class="cm-cp-title"><div class="cm-cp-value">包裹在一个名为cm-cp-container的div cm-cp-container Actually it is working, but it merges all together, it is shown like below after I put the wrapAll(); 实际上它正在工作,但是将它们合并在一起,如下所示wrapAll();

在此处输入图片说明

what is that issues? 那是什么问题? im wonder how to separate each of it? 我想知道如何分开每个吗? Below is the result i needed, 以下是我需要的结果, 在此处输入图片说明

 $(function() { // document 'use strict'; var coupon = $('div.cm-coupon'); // Settings coupon.each(function() { var _coupon = $(this); var cpValue = _coupon.attr("data-value") + ""; // Different Data type if (_coupon.data('type') == "c1") { _coupon.addClass('red').css( { "background" : "black", "display": "table"} ); _coupon.append( '<div class="cm-cp-title">' + 'black here' + '</div>' + '\\n' + '<div class="cm-cp-value">' + cpValue + '</div>' ); } else if (_coupon.data('type') == "c2") { _coupon.addClass('green').css( { "background" : "green", "display": "table"} ); _coupon.append('<div class="cm-cp-title">'+ 'green here' + '</div>' + '\\n' + '<div class="cm-cp-value">' + cpValue + '</div>'); } else if (_coupon.data('type') == "c3") { _coupon.addClass('blue').css( { "background" :"blue", "display": "table"} ); _coupon.append('<div class="cm-cp-title">'+ 'blue here' + '</div>' + '\\n' + '<div class="cm-cp-value">' + cpValue + '</div>'); } else { return false; } }); $('.cm-cp-title, .cm-cp-value').wrapAll("<div class='cm-cp-container'/>"); // alignment to middle $('.cm-coupon').on('resize',function() { $(".cm-cp-container").css('margin-top', function() { return($('.cm-coupon').height() - $(this).height()) / 2 }); }).resize(); });//end 
 .cm-coupon { width: 340px; height: 156px; float: left;color: #fff; margin: 0 10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cm-coupon" data-type="c1" data-value="50"></div> <div class="cm-coupon" data-type="c2" data-value="20"></div> <div class="cm-coupon" data-type="c3" data-value="70"></div> 

Working Snippet : 工作片段:

 $(function() { 'use strict'; var coupon = $('div.cm-coupon'); var colors = new Map([["c1", "black"], ["c2", "green"], ["c3", "blue"]]); // Settings coupon.each(function() { var _coupon = $(this); var cpValue = _coupon.attr("data-value") + ""; var color = colors.get(_coupon.data('type')); _coupon.addClass(color).css({ "background" : color, "display": "table" }); _coupon.append('<div class="cm-cp-title">' + color + ' here' + '</div>' + '\\n' + '<div class="cm-cp-value">' + cpValue + '</div>'); $(_coupon.children()).wrapAll("<div class='cm-cp-container'/>"); }); // alignment to middle $('.cm-coupon').on('resize',function() { $(".cm-cp-container").css('margin-top', function() { return($('.cm-coupon').height() - $(this).height()) / 2 }); }).resize(); });//end 
 .cm-coupon { width: 340px; height: 156px; float: left; color: #fff; margin: 0 10px; text-align: center; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cm-coupon" data-type="c1" data-value="50"></div> <div class="cm-coupon" data-type="c2" data-value="20"></div> <div class="cm-coupon" data-type="c3" data-value="70"></div> 

Explanation : 说明:

  • First 第一
    I reduced the code removing the if statements because the only difference between the blocks if/else/else was the color ("black"/"green"/"blue") . 我减少了删除if语句的代码,因为if/else/else块之间的唯一区别是颜色("black"/"green"/"blue") I used a Map instead, to switch the value of the color according to the type. 我改用Map来根据类型切换颜色的值。

    What I did: 我做了什么:

     var colors = new Map([["c1", "black"], ["c2", "green"], ["c3", "blue"]]); coupon.each(function () { var _coupon = $(this); var color = colors.get(_coupon.data('type')); 

    And then use color where need to. 然后在需要的地方使用color


  • Second 第二
    The problem you are encoutering is because you are not wrapping all the divs into the container, but wrapping the children of the divs. 您遇到麻烦的问题是因为您没有将所有div包装到容器中,而是包装了div的子级。

    So 所以

     $('.cm-cp-title, .cm-cp-value').wrapAll("<div class='cm-cp-container'/>"); 

    becomes

     $(coupon).wrapAll("<div class='cm-cp-container'/>"); 

EDIT : 编辑:
It seems like you want to wrap the inner elements of the coupons instead. 似乎您想包装优惠券的内部元素。

Then use _coupon.children() instead, like this 然后像这样使用_coupon.children()

$(_coupon.children()).wrapAll("<div class='cm-cp-container'/>");

and move it inside the each loop. 并将其移动到each循环中。

I edited the snippet. 我编辑了代码段。 you can check. 您可以检查。

In fact, the way you did it in your code, it is selecting all the matching elements in the document and wrapping it altogether. 实际上,您在代码中执行此操作的方式是选择文档中所有匹配的元素并将其完全包装起来。 That is why the last two were moving inside the black div. 这就是为什么最后两个在黑色div内移动的原因。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM