将css应用于第n个孩子的话(applying css to nth child words)

将css应用于第n个孩子的话(applying css to nth child words)

一个有趣的小问题......

试图循环遍历段落（单词）的子项并逐个着色。

这是一个硬编码的工作版本，单独的元素中有单词： http ： //jsfiddle.net/JjRHT/25/

运用

window.setInterval(function(){ $(".item:nth-child(1)").css("color", "#FFFFFF"); }, 1000);

只是为了展示我正在尝试的东西......显然不是要走的路！

所以 - 我可以选择一个段落的每个孩子吗？ 以及如何正确地进行循环 - 稍微延迟......

史蒂芬

编辑：

我发现了一个jquery 插件 ，可以将文本拆分成为css准备好的单词：

<p class="word_split">Don't break my heart.</p> <script> $(document).ready(function() { $(".word_split").lettering('words'); }); </script>

这会产生：

<p class="word_split"> <span class="word1">Don't</span> <span class="word2">break</span> <span class="word3">my</span> <span class="word4">heart.</span> </p>

An interesting little problem...

Trying to loop through the children of a paragraph (words) and color them, one by one.

Here's a hard coded working version with words in separate elements: http://jsfiddle.net/JjRHT/25/

using

window.setInterval(function(){ $(".item:nth-child(1)").css("color", "#FFFFFF"); }, 1000);

just to show what I'm attempting...obviously not the way to go!

so - can I select each child of a paragraph? and how do I do the loop properly - with a small delay...

steven

edit:

I found a jquery plugin that splits text into words nicely ready for css:

<p class="word_split">Don't break my heart.</p> <script> $(document).ready(function() { $(".word_split").lettering('words'); }); </script>

Which will generate:

<p class="word_split"> <span class="word1">Don't</span> <span class="word2">break</span> <span class="word3">my</span> <span class="word4">heart.</span> </p>

最满意答案

这里的主要问题是你不能将样式应用于段落的单词。

如果要对单词（而不是整个元素）进行着色，则必须从段落中提取单词。

这将段落分为两部分，并为每个部分赋予不同的颜色：

var tokens = $paragraph.text().split(' '); var i=0; window.setInterval(function(){ i = (i+1)%tokens.length; $paragraph.html( '<span class=onecolor>'+tokens.slice(0, i).join(' ')+'</span>' + ' <span class=othercolor>'+tokens.slice(i, tokens.length).join(' ')+'</span>'); }, 1000);​

演示： http ： //jsfiddle.net/CcBLr/1/

---

编辑：

假设你想对你的单词做出特定的事情（例如，你说，不同的延迟），你可以这样做准备：

var tokens = $paragraph.text().split(' '); var spans = tokens.map(function(t){return '<span>'+t+'</span>'}); $paragraph.html(spans.join(' ')); var $words = $paragraph.children('span');

$words现在是段落中单词的集合，但您可以在其上应用样式。 例如：

$words.each(function(){ var $word = $(this); setTimeout( ...

The main problem here is that you can't apply styles to words of a paragraph.

If you want to color words (and not the whole element), you'll have to extract the words from the paragraph.

This cuts the paragraph in two parts, and gives a different color to each part :

var tokens = $paragraph.text().split(' '); var i=0; window.setInterval(function(){ i = (i+1)%tokens.length; $paragraph.html( '<span class=onecolor>'+tokens.slice(0, i).join(' ')+'</span>' + ' <span class=othercolor>'+tokens.slice(i, tokens.length).join(' ')+'</span>'); }, 1000);​

Demonstration : http://jsfiddle.net/CcBLr/1/

---

EDIT :

Supposing you want to make specific things on your words (as you say, different delays for example), you could do this for the preparation :

var tokens = $paragraph.text().split(' '); var spans = tokens.map(function(t){return '<span>'+t+'</span>'}); $paragraph.html(spans.join(' ')); var $words = $paragraph.children('span');

$words is now a collection of the words of the paragraph but you may apply styles on them. for example with this :

$words.each(function(){ var $word = $(this); setTimeout( ...将css应用于第n个孩子的话(applying css to nth child words)

一个有趣的小问题......

试图循环遍历段落（单词）的子项并逐个着色。

这是一个硬编码的工作版本，单独的元素中有单词： http ： //jsfiddle.net/JjRHT/25/

运用

window.setInterval(function(){ $(".item:nth-child(1)").css("color", "#FFFFFF"); }, 1000);

只是为了展示我正在尝试的东西......显然不是要走的路！

所以 - 我可以选择一个段落的每个孩子吗？ 以及如何正确地进行循环 - 稍微延迟......

史蒂芬

编辑：

我发现了一个jquery 插件 ，可以将文本拆分成为css准备好的单词：

<p class="word_split">Don't break my heart.</p> <script> $(document).ready(function() { $(".word_split").lettering('words'); }); </script>

这会产生：

<p class="word_split"> <span class="word1">Don't</span> <span class="word2">break</span> <span class="word3">my</span> <span class="word4">heart.</span> </p>

An interesting little problem...

Trying to loop through the children of a paragraph (words) and color them, one by one.

Here's a hard coded working version with words in separate elements: http://jsfiddle.net/JjRHT/25/

using

window.setInterval(function(){ $(".item:nth-child(1)").css("color", "#FFFFFF"); }, 1000);

just to show what I'm attempting...obviously not the way to go!

so - can I select each child of a paragraph? and how do I do the loop properly - with a small delay...

steven

edit:

I found a jquery plugin that splits text into words nicely ready for css:

<p class="word_split">Don't break my heart.</p> <script> $(document).ready(function() { $(".word_split").lettering('words'); }); </script>

Which will generate:

<p class="word_split"> <span class="word1">Don't</span> <span class="word2">break</span> <span class="word3">my</span> <span class="word4">heart.</span> </p>

最满意答案

这里的主要问题是你不能将样式应用于段落的单词。

如果要对单词（而不是整个元素）进行着色，则必须从段落中提取单词。

这将段落分为两部分，并为每个部分赋予不同的颜色：

var tokens = $paragraph.text().split(' '); var i=0; window.setInterval(function(){ i = (i+1)%tokens.length; $paragraph.html( '<span class=onecolor>'+tokens.slice(0, i).join(' ')+'</span>' + ' <span class=othercolor>'+tokens.slice(i, tokens.length).join(' ')+'</span>'); }, 1000);​

演示： http ： //jsfiddle.net/CcBLr/1/

---

编辑：

假设你想对你的单词做出特定的事情（例如，你说，不同的延迟），你可以这样做准备：

var tokens = $paragraph.text().split(' '); var spans = tokens.map(function(t){return '<span>'+t+'</span>'}); $paragraph.html(spans.join(' ')); var $words = $paragraph.children('span');

$words现在是段落中单词的集合，但您可以在其上应用样式。 例如：

$words.each(function(){ var $word = $(this); setTimeout( ...

The main problem here is that you can't apply styles to words of a paragraph.

If you want to color words (and not the whole element), you'll have to extract the words from the paragraph.

This cuts the paragraph in two parts, and gives a different color to each part :

var tokens = $paragraph.text().split(' '); var i=0; window.setInterval(function(){ i = (i+1)%tokens.length; $paragraph.html( '<span class=onecolor>'+tokens.slice(0, i).join(' ')+'</span>' + ' <span class=othercolor>'+tokens.slice(i, tokens.length).join(' ')+'</span>'); }, 1000);​

Demonstration : http://jsfiddle.net/CcBLr/1/

---

EDIT :

Supposing you want to make specific things on your words (as you say, different delays for example), you could do this for the preparation :

var tokens = $paragraph.text().split(' '); var spans = tokens.map(function(t){return '<span>'+t+'</span>'}); $paragraph.html(spans.join(' ')); var $words = $paragraph.children('span');

$words is now a collection of the words of the paragraph but you may apply styles on them. for example with this :

$words.each(function(){ var $word = $(this); setTimeout( ...