jquery - 使用 jQuery 为嵌套 block 引号设置替代颜色样式

Question

你好!我正在尝试使用 jQuery 将具有不同颜色的 border-left 添加到一系列(理论上是无限的)嵌套 block 引用中。这样可以更轻松地理解 block 引号中包含的信息。

像这样:

<blockquote> 
    <blockquote>
        <blockquote>
             <blockquote>
                 content
             </blockquote>
             content
        </blockquote>
        content
    </blockquote>
    content
</blockquote>

限制:我无法通过 html ids/classes 手动添加 block 引用，因为它们是从 Tumblr 调用的。

我找到了 another method其中，您通过 jQuery 向 block 引用添加类，并通过 CSS 添加样式，但是，我想通过 jQuery 添加 CSS 并通过 jQuery 颜色数组添加颜色。

我在这里尝试过:js fiddle link .

//the array of colors
var colors = ["e45c5c","ffcc66","d7e972","76e2c2","5dc6cd",
          "be7ce4","e45c5c","ffcc66","d7e972"];

//in element article
    //find blockquote
      //for each blockquote
        //add the css border-left-color: # (colour can be found by going through 
        //through list of color codes)

 $('article').find('blockquote').each(function(){
     $(blockquote).css("border-left-color", "#" + colors[count]);
 });

在此之前我并没有真正研究过 js/jQuery，所以如果我对术语的使用有任何混淆，请原谅!

Answer 1

传递给 each() 处理程序的参数是当前元素的索引。您可以使用它通过模运算符从数组中获取所需的颜色:

$('article').find('blockquote').each(function(i){
   $(this).css("border-left-color", "#" + colors[i % colors.length]);
});

Updated fiddle

还要注意在迭代中使用 this 来仅更改当前元素的 CSS。