Question

我试图将两个div <div class="cm-cp-title">和<div class="cm-cp-value">包含在名为cm-cp-container的div中。实际上它正在工作，但它合并在一起，在我放wrapAll();后显示如下

那是什么问题？我想知道如何分开它们？以下是我需要的结果，

＆＃13;

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

＆＃13;

.cm-coupon {
	width: 340px;
	height: 156px;
	float: left;color: #fff;
	margin: 0 10px;

}

＆＃13;

<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>

＆＃13;

Answer 1

工作片段：

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

说明：

<强>第一
我减少了删除if语句的代码，因为块if/else/else之间的唯一区别是颜色("black"/"green"/"blue")。我改为使用Map来根据类型切换颜色值。

我做了什么：
```
var colors = new Map([["c1", "black"], ["c2", "green"], ["c3", "blue"]]);
coupon.each(function () {
  var _coupon = $(this);
  var color = colors.get(_coupon.data('type'));
```
然后在需要的地方使用color。

<强>第二
你遇到的问题是因为你没有将所有div包装到容器中，而是包装div的子节点。

所以

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

变为

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

编辑：
看起来你想要包装优惠券的内部元素。

然后使用_coupon.children()代替，就像这样

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

并将其移至each循环内。

我编辑了代码段。你可以查一下。

事实上，您在代码中执行此操作的方式是选择文档中的所有匹配元素并将其完全包装。这就是为什么后两个人在黑色div中移动的原因。

如何在新div中包装div？

1 个答案:

工作片段：

说明：