如何将所有子元素包装在 class 中？
How to wrap all children elements in a class?
我有一个函数可以拆分元素中的所有行并将它们包装在 <div> 中。例如，如果我有一个看起来像这样的元素：
<div class="test">
Lorem Khaled Ipsum is a major key to success. I’m up to something. To be successful you’ve
got to work hard, to make history, simple, you’ve got to make it. I told you all this before, when
you have a swimming pool, do not use chlorine, use salt water, the healing, salt water is the healing.
The key to more success is to get a massage once a week, very important, major key, cloth talk.
Wraith talk. Don’t ever play yourself.
</div>
然后它像这样包装所有行：
<div class="test">
<div class="line_wrap">Lorem Khaled Ipsum is a major key to success. I’m up to something. To be successful you’ve</div>
<div class="line_wrap">got to work hard, to make history, simple, you’ve got to make it. I told you all this before, when </div>
<div class="line_wrap">you have a swimming pool, do not use chlorine, use salt water, the healing, salt water is the healing. </div>
<div class="line_wrap">The key to more success is to get a massage once a week, very important, major key, cloth talk. </div>
<div class="line_wrap">Wraith talk. Don’t ever play yourself.</div>
</div>
我遇到的问题是我正在寻找一种方法将这些项目包装在另一个 <div> 中，例如：
<div class="test">
<div class="wrap">
<div class="line_wrap">Lorem Khaled Ipsum is a major key to success. I’m up to something. To be successful you’ve</div>
<div class="line_wrap">got to work hard, to make history, simple, you’ve got to make it. I told you all this before, when </div>
<div class="line_wrap">you have a swimming pool, do not use chlorine, use salt water, the healing, salt water is the healing. </div>
<div class="line_wrap">The key to more success is to get a massage once a week, very important, major key, cloth talk. </div>
<div class="line_wrap">Wraith talk. Don’t ever play yourself.</div>
</div>
</div>
到目前为止，我已经尝试使用 .each 函数来完成 wrapall，但它进行了 4 层包装，如果我有多个元素，它将获取所有元素并将它们放入在第一个元素中。
我的问题是：如何将所有子项包装到一个 <div> 中？
我的工作代码：
function wrapNewLines(targetSelector, wrapEl = 'span', wrapClass = 'new-line') {
const content = document.querySelectorAll(targetSelector)
content.forEach(section => {
let sectionWidth = section.getBoundingClientRect().width
let words = section.innerText.split(/( )/g)
section.innerHTML = ''
words.forEach(word => {
section.innerHTML += `<span>${word}</span>`
})
let lines = []
let line = []
let lineWidth = 0
let spans = section.querySelectorAll('span')
spans.forEach((span, i) => {
let spanWidth = span.getBoundingClientRect().width
if (lineWidth + spanWidth <= sectionWidth - 1) {
line.push(span)
lineWidth += spanWidth
} else {
lines.push(line)
line = []
lineWidth = 0
line.push(span)
lineWidth += spanWidth
}
})
if (line.length) lines.push(line)
let newLines = lines
.map(
line =>
`<${wrapEl} class=${wrapClass}>${line
.map(span => span.innerText)
.join('')}</${wrapEl}>`
)
.join('')
section.innerHTML = newLines
})
}
wrapNewLines('.emails .multi-items .message-contain #content','div', 'line_wrap');
$.each($('.message-contain'), function(i, message) {
var size = 6; //define how many elements you want in each wrapper
var items = $(message).find('.line_wrap'); //the collection of all your items
var container; //this will be used to add the items in it.
$.each(items, function(i, item) {
//this expression checks if we need to create a new container
if (i % size === 0) {
container = $('<div class="wrapped"></div>'); //create a new container
$(message).append(container); //add the new container to the body
}
$(item).appendTo(container); //add the item to the container
});
});
$(".emails .multi-items #content").each(function (i) {
$('.line_wrap').children().wrapAll("<div class='test'></div>");
});
.wrapped {background:black;color:white}
.line_wrap {border:1px solid #aa0000}
#content {margin:35px}
.test {color:yellow}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="emails">
<ul class="multi-items">
<div class="message-contain">
<div id="content">
1 - The first of the month is coming, we have to get money, we have no choice. It cost money to eat and they don’t want you to eat. Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast, so we are going to enjoy our breakfast. They key is to have every key, the key to open every door. To succeed you must believe. When you believe, you will succeed. They don’t want us to eat.
Another one. Major key, don’t fall for the trap, stay focused. It’s the ones closest to you that want to see you fail. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. The key to success is to keep your head above the water, never give up. Stay focused. They don’t want us to eat. The key is to drink coconut, fresh coconut, trust me. Give thanks to the most high. Surround yourself with angels, positive energy, beautiful people, beautiful souls, clean heart, angel. Congratulations, you played yourself.
Major key, don’t fall for the trap, stay focused. It’s the ones closest to you that want to see you fail. They never said winning was easy. Some people can’t handle success, I can. Another one. You smart, you loyal, you a genius. Look at the sunset, life is amazing, life is beautiful, life is what you make it. The key to success is to keep your head above the water, never give up. They don’t want us to eat. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I’m never giving up, I’m just getting started.
</div>
</div>
<div class="message-contain">
<div id="content">
2 - The key to more success is to get a massage once a week, very important, major key, cloth talk. Eliptical talk. Every chance I get, I water the plants, Lion! Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast, so we are going to enjoy our breakfast. The other day the grass was brown, now it’s green because I ain’t give up. Never surrender. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I’m never giving up, I’m just getting started.
</div>
</div>
</ul>
</div>
问题部分：
$(".emails .multi-items #content").each(function (i) {
$('.line_wrap').children().wrapAll("<div class='test'></div>");
});
只需删除 children 函数，因为您想包装 jQuery 集合本身。
function wrapNewLines(targetSelector, wrapEl = 'span', wrapClass = 'new-line') {
const content = document.querySelectorAll(targetSelector)
content.forEach(section => {
let sectionWidth = section.getBoundingClientRect().width
let words = section.innerText.split(/( )/g)
section.innerHTML = ''
words.forEach(word => {
section.innerHTML += `<span>${word}</span>`
})
let lines = []
let line = []
let lineWidth = 0
let spans = section.querySelectorAll('span')
spans.forEach((span, i) => {
let spanWidth = span.getBoundingClientRect().width
if (lineWidth + spanWidth <= sectionWidth - 1) {
line.push(span)
lineWidth += spanWidth
} else {
lines.push(line)
line = []
lineWidth = 0
line.push(span)
lineWidth += spanWidth
}
})
if (line.length) lines.push(line)
let newLines = lines
.map(
line =>
`<${wrapEl} class=${wrapClass}>${line
.map(span => span.innerText)
.join('')}</${wrapEl}>`
)
.join('')
section.innerHTML = newLines
})
}
wrapNewLines('.emails .multi-items .message-contain #content','div', 'line_wrap');
$.each($('.message-contain'), function(i, message) {
var size = 6; //define how many elements you want in each wrapper
var items = $(message).find('.line_wrap'); //the collection of all your items
var container; //this will be used to add the items in it.
$.each(items, function(i, item) {
//this expression checks if we need to create a new container
if (i % size === 0) {
container = $('<div class="wrapped"></div>'); //create a new container
$(message).append(container); //add the new container to the body
}
$(item).appendTo(container); //add the item to the container
});
});
$('.wrapped').each(function () {
$(this).find('.line_wrap').wrapAll("<div class='test'></div>")
});
.wrapped {background:black;color:white}
.line_wrap {border:1px solid #aa0000}
#content {margin:35px}
.test {color:yellow}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="emails">
<ul class="multi-items">
<div class="message-contain">
<div id="content">
1 - The first of the month is coming, we have to get money, we have no choice. It cost money to eat and they don’t want you to eat. Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast, so we are going to enjoy our breakfast. They key is to have every key, the key to open every door. To succeed you must believe. When you believe, you will succeed. They don’t want us to eat.
Another one. Major key, don’t fall for the trap, stay focused. It’s the ones closest to you that want to see you fail. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. The key to success is to keep your head above the water, never give up. Stay focused. They don’t want us to eat. The key is to drink coconut, fresh coconut, trust me. Give thanks to the most high. Surround yourself with angels, positive energy, beautiful people, beautiful souls, clean heart, angel. Congratulations, you played yourself.
Major key, don’t fall for the trap, stay focused. It’s the ones closest to you that want to see you fail. They never said winning was easy. Some people can’t handle success, I can. Another one. You smart, you loyal, you a genius. Look at the sunset, life is amazing, life is beautiful, life is what you make it. The key to success is to keep your head above the water, never give up. They don’t want us to eat. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I’m never giving up, I’m just getting started.
</div>
</div>
<div class="message-contain">
<div id="content">
2 - The key to more success is to get a massage once a week, very important, major key, cloth talk. Eliptical talk. Every chance I get, I water the plants, Lion! Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast, so we are going to enjoy our breakfast. The other day the grass was brown, now it’s green because I ain’t give up. Never surrender. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I’m never giving up, I’m just getting started.
</div>
</div>
</ul>
</div>
你可以尝试用 .wrapped 个元素做一个循环，找到里面所有的 .line_wrap 个元素并将它们包裹起来：
$('.wrapped').each(function () {
$(this).find('.line_wrap').wrapAll("<div class='test'></div>")
});
function wrapNewLines(targetSelector, wrapEl = 'span', wrapClass = 'new-line') {
const content = document.querySelectorAll(targetSelector)
content.forEach(section => {
let sectionWidth = section.getBoundingClientRect().width
let words = section.innerText.split(/( )/g)
section.innerHTML = ''
words.forEach(word => {
section.innerHTML += `<span>${word}</span>`
})
let lines = []
let line = []
let lineWidth = 0
let spans = section.querySelectorAll('span')
spans.forEach((span, i) => {
let spanWidth = span.getBoundingClientRect().width
if (lineWidth + spanWidth <= sectionWidth - 1) {
line.push(span)
lineWidth += spanWidth
} else {
lines.push(line)
line = []
lineWidth = 0
line.push(span)
lineWidth += spanWidth
}
})
if (line.length) lines.push(line)
let newLines = lines
.map(
line =>
`<${wrapEl} class=${wrapClass}>${line
.map(span => span.innerText)
.join('')}</${wrapEl}>`
)
.join('')
section.innerHTML = newLines
})
}
wrapNewLines('.emails .multi-items .message-contain #content','div', 'line_wrap');
$.each($('.message-contain'), function(i, message) {
var size = 6; //define how many elements you want in each wrapper
var items = $(message).find('.line_wrap'); //the collection of all your items
var container; //this will be used to add the items in it.
$.each(items, function(i, item) {
//this expression checks if we need to create a new container
if (i % size === 0) {
container = $('<div class="wrapped"></div>'); //create a new container
$(message).append(container); //add the new container to the body
}
$(item).appendTo(container); //add the item to the container
});
});
$('.wrapped').each(function () {
$(this).find('.line_wrap').wrapAll("<div class='test'></div>")
});
.wrapped {background:black;color:white}
.line_wrap {border:1px solid #aa0000}
#content {margin:35px}
.test {color:yellow}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="emails">
<ul class="multi-items">
<div class="message-contain">
<div id="content">
1 - The first of the month is coming, we have to get money, we have no choice. It cost money to eat and they don’t want you to eat. Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast, so we are going to enjoy our breakfast. They key is to have every key, the key to open every door. To succeed you must believe. When you believe, you will succeed. They don’t want us to eat.
Another one. Major key, don’t fall for the trap, stay focused. It’s the ones closest to you that want to see you fail. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. The key to success is to keep your head above the water, never give up. Stay focused. They don’t want us to eat. The key is to drink coconut, fresh coconut, trust me. Give thanks to the most high. Surround yourself with angels, positive energy, beautiful people, beautiful souls, clean heart, angel. Congratulations, you played yourself.
Major key, don’t fall for the trap, stay focused. It’s the ones closest to you that want to see you fail. They never said winning was easy. Some people can’t handle success, I can. Another one. You smart, you loyal, you a genius. Look at the sunset, life is amazing, life is beautiful, life is what you make it. The key to success is to keep your head above the water, never give up. They don’t want us to eat. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I’m never giving up, I’m just getting started.
</div>
</div>
<div class="message-contain">
<div id="content">
2 - The key to more success is to get a massage once a week, very important, major key, cloth talk. Eliptical talk. Every chance I get, I water the plants, Lion! Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast, so we are going to enjoy our breakfast. The other day the grass was brown, now it’s green because I ain’t give up. Never surrender. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I’m never giving up, I’m just getting started.
</div>
</div>
</ul>
</div>
您可以通过仅针对我们在 .each() 方法中循环的当前 .wrapped div 中的 .line_wrap div 来解决此问题.这是需要的，这样我们就不会一次将所有 .line_wrap 包裹在所有 .wrapped divs:
中
$(".emails .multi-items .wrapped").each(function (i) {
$('.line_wrap', this).wrapAll("<div class='test'></div>");
});
工作演示：
function wrapNewLines(targetSelector, wrapEl = 'span', wrapClass = 'new-line') {
const content = document.querySelectorAll(targetSelector)
content.forEach(section => {
let sectionWidth = section.getBoundingClientRect().width
let words = section.innerText.split(/( )/g)
section.innerHTML = ''
words.forEach(word => {
section.innerHTML += `<span>${word}</span>`
})
let lines = []
let line = []
let lineWidth = 0
let spans = section.querySelectorAll('span')
spans.forEach((span, i) => {
let spanWidth = span.getBoundingClientRect().width
if (lineWidth + spanWidth <= sectionWidth - 1) {
line.push(span)
lineWidth += spanWidth
} else {
lines.push(line)
line = []
lineWidth = 0
line.push(span)
lineWidth += spanWidth
}
})
if (line.length) lines.push(line)
let newLines = lines
.map(
line =>
`<${wrapEl} class=${wrapClass}>${line
.map(span => span.innerText)
.join('')}</${wrapEl}>`
)
.join('')
section.innerHTML = newLines
})
}
wrapNewLines('.emails .multi-items .message-contain #content', 'div', 'line_wrap');
$.each($('.message-contain'), function(i, message) {
var size = 6; //define how many elements you want in each wrapper
var items = $(message).find('.line_wrap'); //the collection of all your items
var container; //this will be used to add the items in it.
$.each(items, function(i, item) {
//this expression checks if we need to create a new container
if (i % size === 0) {
container = $('<div class="wrapped"></div>'); //create a new container
$(message).append(container); //add the new container to the body
}
$(item).appendTo(container); //add the item to the container
});
});
$(".emails .multi-items .wrapped").each(function (i) {
$('.line_wrap', this).wrapAll("<div class='test'></div>");
});
.wrapped {
background: black;
color: white
}
.line_wrap {
border: 1px solid #aa0000;
padding: 4px 8px;
}
#content {
margin: 35px
}
.test {
color: yellow
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="emails">
<ul class="multi-items">
<div class="message-contain">
<div id="content">
1 - The first of the month is coming, we have to get money, we have no choice. It cost money to eat and they don’t want you to eat. Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast, so we are going to enjoy
our breakfast. They key is to have every key, the key to open every door. To succeed you must believe. When you believe, you will succeed. They don’t want us to eat. Another one. Major key, don’t fall for the trap, stay focused. It’s the ones
closest to you that want to see you fail. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. The key to success is to keep your head above the water, never give up. Stay focused. They don’t want us to eat.
The key is to drink coconut, fresh coconut, trust me. Give thanks to the most high. Surround yourself with angels, positive energy, beautiful people, beautiful souls, clean heart, angel. Congratulations, you played yourself. Major key, don’t fall
for the trap, stay focused. It’s the ones closest to you that want to see you fail. They never said winning was easy. Some people can’t handle success, I can. Another one. You smart, you loyal, you a genius. Look at the sunset, life is amazing,
life is beautiful, life is what you make it. The key to success is to keep your head above the water, never give up. They don’t want us to eat. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat
and tears, and I’m never giving up, I’m just getting started.
</div>
</div>
<div class="message-contain">
<div id="content">
2 - The key to more success is to get a massage once a week, very important, major key, cloth talk. Eliptical talk. Every chance I get, I water the plants, Lion! Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast,
so we are going to enjoy our breakfast. The other day the grass was brown, now it’s green because I ain’t give up. Never surrender. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears,
and I’m never giving up, I’m just getting started.
</div>
</div>
</ul>
</div>
我有一个函数可以拆分元素中的所有行并将它们包装在 <div> 中。例如，如果我有一个看起来像这样的元素：
<div class="test">
Lorem Khaled Ipsum is a major key to success. I’m up to something. To be successful you’ve
got to work hard, to make history, simple, you’ve got to make it. I told you all this before, when
you have a swimming pool, do not use chlorine, use salt water, the healing, salt water is the healing.
The key to more success is to get a massage once a week, very important, major key, cloth talk.
Wraith talk. Don’t ever play yourself.
</div>
然后它像这样包装所有行：
<div class="test">
<div class="line_wrap">Lorem Khaled Ipsum is a major key to success. I’m up to something. To be successful you’ve</div>
<div class="line_wrap">got to work hard, to make history, simple, you’ve got to make it. I told you all this before, when </div>
<div class="line_wrap">you have a swimming pool, do not use chlorine, use salt water, the healing, salt water is the healing. </div>
<div class="line_wrap">The key to more success is to get a massage once a week, very important, major key, cloth talk. </div>
<div class="line_wrap">Wraith talk. Don’t ever play yourself.</div>
</div>
我遇到的问题是我正在寻找一种方法将这些项目包装在另一个 <div> 中，例如：
<div class="test">
<div class="wrap">
<div class="line_wrap">Lorem Khaled Ipsum is a major key to success. I’m up to something. To be successful you’ve</div>
<div class="line_wrap">got to work hard, to make history, simple, you’ve got to make it. I told you all this before, when </div>
<div class="line_wrap">you have a swimming pool, do not use chlorine, use salt water, the healing, salt water is the healing. </div>
<div class="line_wrap">The key to more success is to get a massage once a week, very important, major key, cloth talk. </div>
<div class="line_wrap">Wraith talk. Don’t ever play yourself.</div>
</div>
</div>
到目前为止，我已经尝试使用 .each 函数来完成 wrapall，但它进行了 4 层包装，如果我有多个元素，它将获取所有元素并将它们放入在第一个元素中。
我的问题是：如何将所有子项包装到一个 <div> 中？
我的工作代码：
function wrapNewLines(targetSelector, wrapEl = 'span', wrapClass = 'new-line') {
const content = document.querySelectorAll(targetSelector)
content.forEach(section => {
let sectionWidth = section.getBoundingClientRect().width
let words = section.innerText.split(/( )/g)
section.innerHTML = ''
words.forEach(word => {
section.innerHTML += `<span>${word}</span>`
})
let lines = []
let line = []
let lineWidth = 0
let spans = section.querySelectorAll('span')
spans.forEach((span, i) => {
let spanWidth = span.getBoundingClientRect().width
if (lineWidth + spanWidth <= sectionWidth - 1) {
line.push(span)
lineWidth += spanWidth
} else {
lines.push(line)
line = []
lineWidth = 0
line.push(span)
lineWidth += spanWidth
}
})
if (line.length) lines.push(line)
let newLines = lines
.map(
line =>
`<${wrapEl} class=${wrapClass}>${line
.map(span => span.innerText)
.join('')}</${wrapEl}>`
)
.join('')
section.innerHTML = newLines
})
}
wrapNewLines('.emails .multi-items .message-contain #content','div', 'line_wrap');
$.each($('.message-contain'), function(i, message) {
var size = 6; //define how many elements you want in each wrapper
var items = $(message).find('.line_wrap'); //the collection of all your items
var container; //this will be used to add the items in it.
$.each(items, function(i, item) {
//this expression checks if we need to create a new container
if (i % size === 0) {
container = $('<div class="wrapped"></div>'); //create a new container
$(message).append(container); //add the new container to the body
}
$(item).appendTo(container); //add the item to the container
});
});
$(".emails .multi-items #content").each(function (i) {
$('.line_wrap').children().wrapAll("<div class='test'></div>");
});
.wrapped {background:black;color:white}
.line_wrap {border:1px solid #aa0000}
#content {margin:35px}
.test {color:yellow}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="emails">
<ul class="multi-items">
<div class="message-contain">
<div id="content">
1 - The first of the month is coming, we have to get money, we have no choice. It cost money to eat and they don’t want you to eat. Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast, so we are going to enjoy our breakfast. They key is to have every key, the key to open every door. To succeed you must believe. When you believe, you will succeed. They don’t want us to eat.
Another one. Major key, don’t fall for the trap, stay focused. It’s the ones closest to you that want to see you fail. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. The key to success is to keep your head above the water, never give up. Stay focused. They don’t want us to eat. The key is to drink coconut, fresh coconut, trust me. Give thanks to the most high. Surround yourself with angels, positive energy, beautiful people, beautiful souls, clean heart, angel. Congratulations, you played yourself.
Major key, don’t fall for the trap, stay focused. It’s the ones closest to you that want to see you fail. They never said winning was easy. Some people can’t handle success, I can. Another one. You smart, you loyal, you a genius. Look at the sunset, life is amazing, life is beautiful, life is what you make it. The key to success is to keep your head above the water, never give up. They don’t want us to eat. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I’m never giving up, I’m just getting started.
</div>
</div>
<div class="message-contain">
<div id="content">
2 - The key to more success is to get a massage once a week, very important, major key, cloth talk. Eliptical talk. Every chance I get, I water the plants, Lion! Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast, so we are going to enjoy our breakfast. The other day the grass was brown, now it’s green because I ain’t give up. Never surrender. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I’m never giving up, I’m just getting started.
</div>
</div>
</ul>
</div>
问题部分：
$(".emails .multi-items #content").each(function (i) {
$('.line_wrap').children().wrapAll("<div class='test'></div>");
});
只需删除 children 函数，因为您想包装 jQuery 集合本身。
function wrapNewLines(targetSelector, wrapEl = 'span', wrapClass = 'new-line') {
const content = document.querySelectorAll(targetSelector)
content.forEach(section => {
let sectionWidth = section.getBoundingClientRect().width
let words = section.innerText.split(/( )/g)
section.innerHTML = ''
words.forEach(word => {
section.innerHTML += `<span>${word}</span>`
})
let lines = []
let line = []
let lineWidth = 0
let spans = section.querySelectorAll('span')
spans.forEach((span, i) => {
let spanWidth = span.getBoundingClientRect().width
if (lineWidth + spanWidth <= sectionWidth - 1) {
line.push(span)
lineWidth += spanWidth
} else {
lines.push(line)
line = []
lineWidth = 0
line.push(span)
lineWidth += spanWidth
}
})
if (line.length) lines.push(line)
let newLines = lines
.map(
line =>
`<${wrapEl} class=${wrapClass}>${line
.map(span => span.innerText)
.join('')}</${wrapEl}>`
)
.join('')
section.innerHTML = newLines
})
}
wrapNewLines('.emails .multi-items .message-contain #content','div', 'line_wrap');
$.each($('.message-contain'), function(i, message) {
var size = 6; //define how many elements you want in each wrapper
var items = $(message).find('.line_wrap'); //the collection of all your items
var container; //this will be used to add the items in it.
$.each(items, function(i, item) {
//this expression checks if we need to create a new container
if (i % size === 0) {
container = $('<div class="wrapped"></div>'); //create a new container
$(message).append(container); //add the new container to the body
}
$(item).appendTo(container); //add the item to the container
});
});
$('.wrapped').each(function () {
$(this).find('.line_wrap').wrapAll("<div class='test'></div>")
});
.wrapped {background:black;color:white}
.line_wrap {border:1px solid #aa0000}
#content {margin:35px}
.test {color:yellow}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="emails">
<ul class="multi-items">
<div class="message-contain">
<div id="content">
1 - The first of the month is coming, we have to get money, we have no choice. It cost money to eat and they don’t want you to eat. Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast, so we are going to enjoy our breakfast. They key is to have every key, the key to open every door. To succeed you must believe. When you believe, you will succeed. They don’t want us to eat.
Another one. Major key, don’t fall for the trap, stay focused. It’s the ones closest to you that want to see you fail. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. The key to success is to keep your head above the water, never give up. Stay focused. They don’t want us to eat. The key is to drink coconut, fresh coconut, trust me. Give thanks to the most high. Surround yourself with angels, positive energy, beautiful people, beautiful souls, clean heart, angel. Congratulations, you played yourself.
Major key, don’t fall for the trap, stay focused. It’s the ones closest to you that want to see you fail. They never said winning was easy. Some people can’t handle success, I can. Another one. You smart, you loyal, you a genius. Look at the sunset, life is amazing, life is beautiful, life is what you make it. The key to success is to keep your head above the water, never give up. They don’t want us to eat. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I’m never giving up, I’m just getting started.
</div>
</div>
<div class="message-contain">
<div id="content">
2 - The key to more success is to get a massage once a week, very important, major key, cloth talk. Eliptical talk. Every chance I get, I water the plants, Lion! Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast, so we are going to enjoy our breakfast. The other day the grass was brown, now it’s green because I ain’t give up. Never surrender. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I’m never giving up, I’m just getting started.
</div>
</div>
</ul>
</div>
你可以尝试用 .wrapped 个元素做一个循环，找到里面所有的 .line_wrap 个元素并将它们包裹起来：
$('.wrapped').each(function () {
$(this).find('.line_wrap').wrapAll("<div class='test'></div>")
});
function wrapNewLines(targetSelector, wrapEl = 'span', wrapClass = 'new-line') {
const content = document.querySelectorAll(targetSelector)
content.forEach(section => {
let sectionWidth = section.getBoundingClientRect().width
let words = section.innerText.split(/( )/g)
section.innerHTML = ''
words.forEach(word => {
section.innerHTML += `<span>${word}</span>`
})
let lines = []
let line = []
let lineWidth = 0
let spans = section.querySelectorAll('span')
spans.forEach((span, i) => {
let spanWidth = span.getBoundingClientRect().width
if (lineWidth + spanWidth <= sectionWidth - 1) {
line.push(span)
lineWidth += spanWidth
} else {
lines.push(line)
line = []
lineWidth = 0
line.push(span)
lineWidth += spanWidth
}
})
if (line.length) lines.push(line)
let newLines = lines
.map(
line =>
`<${wrapEl} class=${wrapClass}>${line
.map(span => span.innerText)
.join('')}</${wrapEl}>`
)
.join('')
section.innerHTML = newLines
})
}
wrapNewLines('.emails .multi-items .message-contain #content','div', 'line_wrap');
$.each($('.message-contain'), function(i, message) {
var size = 6; //define how many elements you want in each wrapper
var items = $(message).find('.line_wrap'); //the collection of all your items
var container; //this will be used to add the items in it.
$.each(items, function(i, item) {
//this expression checks if we need to create a new container
if (i % size === 0) {
container = $('<div class="wrapped"></div>'); //create a new container
$(message).append(container); //add the new container to the body
}
$(item).appendTo(container); //add the item to the container
});
});
$('.wrapped').each(function () {
$(this).find('.line_wrap').wrapAll("<div class='test'></div>")
});
.wrapped {background:black;color:white}
.line_wrap {border:1px solid #aa0000}
#content {margin:35px}
.test {color:yellow}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="emails">
<ul class="multi-items">
<div class="message-contain">
<div id="content">
1 - The first of the month is coming, we have to get money, we have no choice. It cost money to eat and they don’t want you to eat. Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast, so we are going to enjoy our breakfast. They key is to have every key, the key to open every door. To succeed you must believe. When you believe, you will succeed. They don’t want us to eat.
Another one. Major key, don’t fall for the trap, stay focused. It’s the ones closest to you that want to see you fail. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. The key to success is to keep your head above the water, never give up. Stay focused. They don’t want us to eat. The key is to drink coconut, fresh coconut, trust me. Give thanks to the most high. Surround yourself with angels, positive energy, beautiful people, beautiful souls, clean heart, angel. Congratulations, you played yourself.
Major key, don’t fall for the trap, stay focused. It’s the ones closest to you that want to see you fail. They never said winning was easy. Some people can’t handle success, I can. Another one. You smart, you loyal, you a genius. Look at the sunset, life is amazing, life is beautiful, life is what you make it. The key to success is to keep your head above the water, never give up. They don’t want us to eat. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I’m never giving up, I’m just getting started.
</div>
</div>
<div class="message-contain">
<div id="content">
2 - The key to more success is to get a massage once a week, very important, major key, cloth talk. Eliptical talk. Every chance I get, I water the plants, Lion! Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast, so we are going to enjoy our breakfast. The other day the grass was brown, now it’s green because I ain’t give up. Never surrender. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I’m never giving up, I’m just getting started.
</div>
</div>
</ul>
</div>
您可以通过仅针对我们在 .each() 方法中循环的当前 .wrapped div 中的 .line_wrap div 来解决此问题.这是需要的，这样我们就不会一次将所有 .line_wrap 包裹在所有 .wrapped divs:
$(".emails .multi-items .wrapped").each(function (i) {
$('.line_wrap', this).wrapAll("<div class='test'></div>");
});
工作演示：
function wrapNewLines(targetSelector, wrapEl = 'span', wrapClass = 'new-line') {
const content = document.querySelectorAll(targetSelector)
content.forEach(section => {
let sectionWidth = section.getBoundingClientRect().width
let words = section.innerText.split(/( )/g)
section.innerHTML = ''
words.forEach(word => {
section.innerHTML += `<span>${word}</span>`
})
let lines = []
let line = []
let lineWidth = 0
let spans = section.querySelectorAll('span')
spans.forEach((span, i) => {
let spanWidth = span.getBoundingClientRect().width
if (lineWidth + spanWidth <= sectionWidth - 1) {
line.push(span)
lineWidth += spanWidth
} else {
lines.push(line)
line = []
lineWidth = 0
line.push(span)
lineWidth += spanWidth
}
})
if (line.length) lines.push(line)
let newLines = lines
.map(
line =>
`<${wrapEl} class=${wrapClass}>${line
.map(span => span.innerText)
.join('')}</${wrapEl}>`
)
.join('')
section.innerHTML = newLines
})
}
wrapNewLines('.emails .multi-items .message-contain #content', 'div', 'line_wrap');
$.each($('.message-contain'), function(i, message) {
var size = 6; //define how many elements you want in each wrapper
var items = $(message).find('.line_wrap'); //the collection of all your items
var container; //this will be used to add the items in it.
$.each(items, function(i, item) {
//this expression checks if we need to create a new container
if (i % size === 0) {
container = $('<div class="wrapped"></div>'); //create a new container
$(message).append(container); //add the new container to the body
}
$(item).appendTo(container); //add the item to the container
});
});
$(".emails .multi-items .wrapped").each(function (i) {
$('.line_wrap', this).wrapAll("<div class='test'></div>");
});
.wrapped {
background: black;
color: white
}
.line_wrap {
border: 1px solid #aa0000;
padding: 4px 8px;
}
#content {
margin: 35px
}
.test {
color: yellow
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="emails">
<ul class="multi-items">
<div class="message-contain">
<div id="content">
1 - The first of the month is coming, we have to get money, we have no choice. It cost money to eat and they don’t want you to eat. Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast, so we are going to enjoy
our breakfast. They key is to have every key, the key to open every door. To succeed you must believe. When you believe, you will succeed. They don’t want us to eat. Another one. Major key, don’t fall for the trap, stay focused. It’s the ones
closest to you that want to see you fail. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. The key to success is to keep your head above the water, never give up. Stay focused. They don’t want us to eat.
The key is to drink coconut, fresh coconut, trust me. Give thanks to the most high. Surround yourself with angels, positive energy, beautiful people, beautiful souls, clean heart, angel. Congratulations, you played yourself. Major key, don’t fall
for the trap, stay focused. It’s the ones closest to you that want to see you fail. They never said winning was easy. Some people can’t handle success, I can. Another one. You smart, you loyal, you a genius. Look at the sunset, life is amazing,
life is beautiful, life is what you make it. The key to success is to keep your head above the water, never give up. They don’t want us to eat. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat
and tears, and I’m never giving up, I’m just getting started.
</div>
</div>
<div class="message-contain">
<div id="content">
2 - The key to more success is to get a massage once a week, very important, major key, cloth talk. Eliptical talk. Every chance I get, I water the plants, Lion! Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast,
so we are going to enjoy our breakfast. The other day the grass was brown, now it’s green because I ain’t give up. Never surrender. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears,
and I’m never giving up, I’m just getting started.
</div>
</div>
</ul>
</div>