2017-06-21 38 views
0

我正在开发一款游戏,需要将长文本拆分为500个单词并将它们划分为不同的div。我一直在编写一些我拼凑在一起的代码,因为我的代码有点虚弱。正如你所看到的,代码将文本分割开来,并在每个div中创建一个新的div,并使用类“列”,但是我希望每个div都具有文本的部分。在jQuery中拆分跨越文本的文本

https://jsfiddle.net/CheesyGreen/mmungy5e/

$(document).ready(function() { 
 
     
 
    var contentBlocks = $('#content').text().replace(/.{500}\S*\.\s+/g, '$&@').split(/\.\[email protected]/); 
 
    var contentBlocksLength = contentBlocks.length; 
 

 

 
    var $columns = $('.column'), 
 
     $data = $columns.first().find('p'), 
 
     size = $data.size(), 
 
     columnSize = size/$columns.length; 
 
     
 

 

 
\t $('#content').html(''); 
 

 

 

 

 
$.each(contentBlocks, function(index, value) { 
 
    $('.column').append($('<div class="textBlock">' + value + ((index != contentBlocksLength - 1) ? '.' : '') + '</div>')); 
 
}); 
 

 

 
});
.column { 
 
    border: 5px solid orange; 
 
    float: left; 
 
    width: 150px; 
 
} 
 

 
div:nth-child(2) { 
 
    border: 5px solid red; 
 
} 
 

 
div:nth-child(3) { 
 
    border: 5px solid yellow; 
 
} 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="column" id="content">Ricky Thomas Ponting, AO (born 19 December 1974), nicknamed Punter, is an Australian cricketer, and former captain of the Australia national cricket team between 2004 and 2011 in Test cricket and 2002 and 2011 in One Day International cricket. He is a specialist right-handed batsman, slips and close catching fielder, as well as a very occasional bowler. He represents the Tasmanian Tigers in Australian domestic cricket, the Hobart Hurricanes in the Big Bash League, and played in the Indian Premier League with the Kolkata Knight Riders in 2008. He is widely considered by many to be one of the best batsmen of the modern era, along with Sachin Tendulkar of India and Brian Lara of the West Indies. On 1 December 2006, he reached the highest rating achieved by a Test batsman in the last 50 years. Ponting made his first-class debut for Tasmania in November 1992, when just 17 years and 337 days old, becoming the youngest Tasmanian to play in a Sheffield Shield match. However, he had to wait until 1995 before making his One Day International (ODI) debut, during a quadrangular tournament in New Zealand in a match against South Africa. His Test debut followed shortly after, when selected for the first Test of the 1995 home series against Sri Lanka in Perth, in which he scored 96. He lost his place in the national team several times in the period before early-1999, due to lack of form and discipline, before becoming One Day International captain in early-2002 and Test captain in early-2004. After being involved in over 160 Tests and 370 ODIs, Ponting is Australia's leading run-scorer in Test and ODI cricket. He is one of only four players (along with Sachin Tendulkar, Rahul Dravid and Jacques Kallis) in history to have scored 13,000 Test runs. Statistically, he is one of the most successful captains of all time, with 48 victories in 77 Tests between 2004 and 31 December 2010, while as a player he is also the only cricketer in history to be involved in 100 Test victories.[1] On 29 November 2012 Ponting announced his retirement from Test cricket, the day before he would play in the Perth Test against South Africa. This was his 168th and last Test appearance,[2] equalling the Australian record held by Steve Waugh.[3][4] Ricky Ponting retired on 3 December 2012 with a Test batting average of 51.85.[5] He continued to play cricket around the world. In February 2013 it was announced that he would be captaining the Mumbai Indians team in the Indian Premier League.[6] and in March 2013 he was announced as the first international franchise player for the Caribbean Premier League.[7] Later that month it was revealed by Ponting that this would be his last season playing cricket, as at the end of the competition he would be retiring from all forms of the game.[8] In his final first class innings for Surrey against Notts he hit an unbeaten 169 bringing up a total of 82 first class 100s in an illustrious county career. 
 
<p> 
 
Candlestick Park hosted the Giants from 1960 to 1999 and the 49ers from 1971 until 2013. 
 
The San </p> 
 
<p> 
 
testingThe San </p> 
 
</div> 
 

 
<div class="column"></div> 
 
<div class="column"></div> 
 
<div class="column"></div> 
 
<div class="column"></div>

回答

1

你可以使用CSS呢?

.column { 
 
    columns: 3; 
 
}
<div class="column" id="content">Ricky Thomas Ponting, AO (born 19 December 1974), nicknamed Punter, is an Australian cricketer, and former captain of the Australia national cricket team between 2004 and 2011 in Test cricket and 2002 and 2011 in One Day International cricket. He is a 
 
    specialist right-handed batsman, slips and close catching fielder, as well as a very occasional bowler. He represents the Tasmanian Tigers in Australian domestic cricket, the Hobart Hurricanes in the Big Bash League, and played in the Indian Premier 
 
    League with the Kolkata Knight Riders in 2008. He is widely considered by many to be one of the best batsmen of the modern era, along with Sachin Tendulkar of India and Brian Lara of the West Indies. On 1 December 2006, he reached the highest rating 
 
    achieved by a Test batsman in the last 50 years. Ponting made his first-class debut for Tasmania in November 1992, when just 17 years and 337 days old, becoming the youngest Tasmanian to play in a Sheffield Shield match. However, he had to wait until 
 
    1995 before making his One Day International (ODI) debut, during a quadrangular tournament in New Zealand in a match against South Africa. His Test debut followed shortly after, when selected for the first Test of the 1995 home series against Sri Lanka 
 
    in Perth, in which he scored 96. He lost his place in the national team several times in the period before early-1999, due to lack of form and discipline, before becoming One Day International captain in early-2002 and Test captain in early-2004. After 
 
    being involved in over 160 Tests and 370 ODIs, Ponting is Australia's leading run-scorer in Test and ODI cricket. He is one of only four players (along with Sachin Tendulkar, Rahul Dravid and Jacques Kallis) in history to have scored 13,000 Test runs. 
 
    Statistically, he is one of the most successful captains of all time, with 48 victories in 77 Tests between 2004 and 31 December 2010, while as a player he is also the only cricketer in history to be involved in 100 Test victories.[1] On 29 November 
 
    2012 Ponting announced his retirement from Test cricket, the day before he would play in the Perth Test against South Africa. This was his 168th and last Test appearance,[2] equalling the Australian record held by Steve Waugh.[3][4] Ricky Ponting retired 
 
    on 3 December 2012 with a Test batting average of 51.85.[5] He continued to play cricket around the world. In February 2013 it was announced that he would be captaining the Mumbai Indians team in the Indian Premier League.[6] and in March 2013 he was 
 
    announced as the first international franchise player for the Caribbean Premier League.[7] Later that month it was revealed by Ponting that this would be his last season playing cricket, as at the end of the competition he would be retiring from all 
 
    forms of the game.[8] In his final first class innings for Surrey against Notts he hit an unbeaten 169 bringing up a total of 82 first class 100s in an illustrious county career. 
 

 
</div>

+0

使用CSS会很容易实现,但一旦我把我的动画和项目在一起,那就没有意义了。 div(或列)不会在整个动画中均匀分布,并且可能因场景而异。 –

0

不知道你在寻找什么,但看此更新可以帮助任何。这段代码可以(应该)清理很多,但我不确定你在找什么,所以这可能会帮助你。

https://jsfiddle.net/mmungy5e/15/

<div class="hide" id="content">Ricky Thomas Ponting, AO (born 19 December 1974), nicknamed Punter, is an Australian cricketer, and former captain of the Australia national cricket team between 2004 and 2011 in Test cricket and 2002 and 2011 in One Day International cricket. He is a specialist right-handed batsman, slips and close catching fielder, as well as a very occasional bowler. He represents the Tasmanian Tigers in Australian domestic cricket, the Hobart Hurricanes in the Big Bash League, and played in the Indian Premier League with the Kolkata Knight Riders in 2008. He is widely considered by many to be one of the best batsmen of the modern era, along with Sachin Tendulkar of India and Brian Lara of the West Indies. On 1 December 2006, he reached the highest rating achieved by a Test batsman in the last 50 years. Ponting made his first-class debut for Tasmania in November 1992, when just 17 years and 337 days old, becoming the youngest Tasmanian to play in a Sheffield Shield match. However, he had to wait until 1995 before making his One Day International (ODI) debut, during a quadrangular tournament in New Zealand in a match against South Africa. His Test debut followed shortly after, when selected for the first Test of the 1995 home series against Sri Lanka in Perth, in which he scored 96. He lost his place in the national team several times in the period before early-1999, due to lack of form and discipline, before becoming One Day International captain in early-2002 and Test captain in early-2004. After being involved in over 160 Tests and 370 ODIs, Ponting is Australia's leading run-scorer in Test and ODI cricket. He is one of only four players (along with Sachin Tendulkar, Rahul Dravid and Jacques Kallis) in history to have scored 13,000 Test runs. Statistically, he is one of the most successful captains of all time, with 48 victories in 77 Tests between 2004 and 31 December 2010, while as a player he is also the only cricketer in history to be involved in 100 Test victories.[1] On 29 November 2012 Ponting announced his retirement from Test cricket, the day before he would play in the Perth Test against South Africa. This was his 168th and last Test appearance,[2] equalling the Australian record held by Steve Waugh.[3][4] Ricky Ponting retired on 3 December 2012 with a Test batting average of 51.85.[5] He continued to play cricket around the world. In February 2013 it was announced that he would be captaining the Mumbai Indians team in the Indian Premier League.[6] and in March 2013 he was announced as the first international franchise player for the Caribbean Premier League.[7] Later that month it was revealed by Ponting that this would be his last season playing cricket, as at the end of the competition he would be retiring from all forms of the game.[8] In his final first class innings for Surrey against Notts he hit an unbeaten 169 bringing up a total of 82 first class 100s in an illustrious county career. 
<p> 
Candlestick Park hosted the Giants from 1960 to 1999 and the 49ers from 1971 until 2013. 
The San </p> 
<p> 
testingThe San </p> 
</div> 

<div class="columns"></div> 

CSS

.column { 
    border: 5px solid orange; 
    float: left; 
    width: 150px; 
} 

.hide { 
    display: none; 
} 

div:nth-child(2) { 
    border: 5px solid red; 
} 

div:nth-child(3) { 
    border: 5px solid yellow; 
} 

的JavaScript

$(document).ready(function() { 

    var contentBlocks = $('#content').text().replace(/.{500}\S*\.\s+/g, '$&@').split(/\.\[email protected]/); 
    var contentBlocksLength = contentBlocks.length; 


    var $columns = $('.column'), 
     $data = $columns.first().find('p'), 
     size = $data.size(), 
     columnSize = size/$columns.length; 



    $('#content').html(''); 




$.each(contentBlocks, function(index, value) { 
    $('.columns').append($('<div class="column textBlock">' + value + ((index != contentBlocksLength - 1) ? '.' : '') + '</div>')); 
}); 


}); 
+0

谢谢@Dillon。我回去清理了一下,然后找到了解决办法。你的回答非常接近 - 我需要在多个div中分出tet。 http://jsfiddle.net/CheesyGreen/m2t2c81g/ –

0

我想出了这个解决方案。在这里输入的代码

https://jsfiddle.net/CheesyGreen/m2t2c81g/

$(document).ready(function() { 
 
     
 
    var contentBlocks = $('#content').text().replace(/.{500}\S*\.\s+/g, '$&@').split(/\.\[email protected]/); 
 
    
 
    var contentBlocksLength = contentBlocks.length; 
 

 
     
 
var content = [ 
 
    [ '#content', contentBlocks[0] ], 
 
    [ '#content2', contentBlocks[1] ], 
 
    [ '#content3', contentBlocks[2] ], 
 
    [ '#content4', contentBlocks[3] ], 
 
    [ '#content5', contentBlocks[4] ], 
 
    [ '#content6', contentBlocks[5] ], 
 
    [ '#content7', contentBlocks[6] ], 
 
    [ '#content8', contentBlocks[7] ], 
 
    [ '#content9', contentBlocks[8] ], 
 
    
 
]; 
 

 

 
$.each(content , function(index, obj) { 
 
\t if(obj[1] === undefined) {$(obj[0]).hide(); 
 
} 
 
else { 
 
\t $(obj[0]).html(obj[1]); 
 
} 
 
\t 
 
}); 
 

 

 
//$.each(content , function(index, obj) { 
 
    // $.each(obj, function(key, value) { 
 
    // console.log(value[0][0]) 
 

 
// }); 
 
//}); 
 

 

 

 
});
.columns { 
 
    border: 5px solid orange; 
 
    float: left; 
 
    width: 150px; 
 
} 
 

 
.hide { 
 
    display: none; 
 
} 
 

 
div:nth-child(2) { 
 
    border: 5px solid red; 
 
} 
 

 
div:nth-child(3) { 
 
    border: 5px solid yellow; 
 
} 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="columns" id="content">Ricky Thomas Ponting, AO (born 19 December 1974), nicknamed Punter, is an Australian cricketer, and former captain of the Australia national cricket team between 2004 and 2011 in Test cricket and 2002 and 2011 in One Day International cricket. He is a specialist right-handed batsman, slips and close catching fielder, as well as a very occasional bowler. He represents the Tasmanian Tigers in Australian domestic cricket, the Hobart Hurricanes in the Big Bash League, and played in the Indian Premier League with the Kolkata Knight Riders in 2008. He is widely considered by many to be one of the best batsmen of the modern era, along with Sachin Tendulkar of India and Brian Lara of the West Indies. On 1 December 2006, he reached the highest rating achieved by a Test batsman in the last 50 years. Ponting made his first-class debut for Tasmania in November 1992, when just 17 years and 337 days old, becoming the youngest Tasmanian to play in a Sheffield Shield match. However, he had to wait until 1995 before making his One Day International (ODI) debut, during a quadrangular tournament in New Zealand in a match against South Africa. His Test debut followed shortly after, when selected for the first Test of the 1995 home series against Sri Lanka in Perth, in which he scored 96. He lost his place in the national team several times in the period before early-1999, due to lack of form and discipline, before becoming One Day International captain in early-2002 and Test captain in early-2004. After being involved in over 160 Tests and 370 ODIs, Ponting is Australia's leading run-scorer in Test and ODI cricket. He is one of only four players (along with Sachin Tendulkar, Rahul Dravid and Jacques Kallis) in history to have scored 13,000 Test runs. Statistically, he is one of the most successful captains of all time, with 48 victories in 77 Tests between 2004 and 31 December 2010, while as a player he is also the only cricketer in history to be involved in 100 Test victories.[1] On 29 November 2012 Ponting announced his retirement from Test cricket, the day before he would play in the Perth Test against South Africa. This was his 168th and last Test appearance,[2] equalling the Australian record held by Steve Waugh.[3][4] Ricky Ponting retired on 3 December 2012 with a Test batting average of 51.85.[5] He continued to play cricket around the world. In February 2013 it was announced that he would be captaining the Mumbai Indians team in the Indian Premier League.[6] and in March 2013 he was announced as the first international franchise player for the Caribbean Premier League.[7] Later that month it was revealed by Ponting that this would be his last season playing cricket, as at the end of the competition he would be retiring from all forms of the game.[8] In his final first class innings for Surrey against Notts he hit an unbeaten 169 bringing up a total of 82 first class 100s in an illustrious county career. 
 
<p> 
 
Candlestick Park hosted the Giants from 1960 to 1999 and the 49ers from 1971 until 2013. 
 
The San </p> 
 
<p> 
 
testingThe San </p> 
 
</div> 
 

 
<div class="columns" id="content2"></div> 
 
<div class="columns"id="content3"></div> 
 
<div class="columns" id="content4"></div> 
 
<div class="columns" id="content5"></div> 
 
<div class="columns" id="content6"></div> 
 
<div class="columns" id="content7"></div> 
 
<div class="columns" id="content8"></div> 
 
<div class="columns" id="content9"></div>