Question

你好！我试图使用jQuery为一系列（理论上无限的）嵌套的块引用添加一个带有不同颜色的border-left。这样可以更容易地遵循块引用中包含的信息。

像这样：

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

限制：我不能通过html ids / classes手动添加到blockquotes，因为它们是从Tumblr调用的。

我发现another method通过jQuery在blockquotes中添加类，并通过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。

Answer 2

如果你想要它简单（并且不介意它不漂亮），你可能会使用一个丑陋的解决方法。

只需通过css设置它们的样式：

blockquote
{ border-left-color: #aaaaaa; }

blockquote blockquote
{ border-left-color: #bbbbbb; }

blockquote blockquote blockquote
{ border-left-color: #cccccc; }

blockquote blockquote blockquote blockquote
{ border-left-color: #dddddd; }

blockquote blockquote blockquote blockquote blockquote
{ border-left-color: #eeeeee; }

// ad infinitum (to some reasonable number)

使用jQuery为替代颜色设置嵌套的blockquotes

2 个答案: