javascript - 如何将 Javascript 函数应用于所有 Tumblr 帖子而不仅仅是最新的帖子？

Question

我一直在开发 Tumblr 主题，但一个问题是大多数帖子都是照片。每种类型的帖子都有一个定义的包装颜色，照片帖子是粉红色的，但我想让照片帖子比这更多样化，所以我实现了一些 Javascript，它会获取照片帖子上标题的长度，并使用它来定义内容 wrapper 的颜色。我基于标题长度，因为我希望它对每个帖子的作用不同且单独，因为在我使用“Math.random”编写的先前函数中存在问题。但现在它只作用于最近的帖子。您认为如何更改代码以便该函数适用于页面上的每个照片帖子？

这是引用的 html:

{block:Photo}
  <li class="post photo">
    <div class="content">
      <div name="photowrap" id="photowrap" 
       style="width: 330px;
       background-color: #F6CEE3;
       padding: 1.2em 15px;
       margin: 0 auto;
       border: 3px white solid;
       border-radius: 20px;">
        <center><img src="{PhotoUrl-500}" alt="{PhotoAlt}"/></center>

          {block:Caption}
            <h4><div class="caption" id="phocap">{Caption}</div></h4>
          {/block:Caption}

            <center><div class="notes"><a href="{ReblogURL}" title="Reblog"><img src="http://www.zomm.com/blog/wp-content/uploads/2011/11/recycle-2.jpg"></a><a href="{Permalink}"><img src="http://exchangedownloads.smarttech.com/public/content/0d/0d14fcdc-8db0-4272-b1d0-be30b37bd147/previews/medium/0001.png">{PostNotes}</a></div></center>


      </div>
    </div>
  </li>
{/block:Photo}

这是 Javascript:

<script type="text/javascript">

        var wrapCol = document.getElementById("photowrap");
        var captionnum = document.getElementById("phocap").innerHTML.length;
        if (captionnum == 0)
          wrapCol.style.backgroundColor="#F6CEE3";
        if (captionnum > 0 && captionnum < 50)
          wrapCol.style.backgroundColor="#A7EAFF";
        if (captionnum >= 50)
          wrapCol.style.backgroundColor="#CEF6A3";

</script> 

Answer 1

我认为这可以做到。

var wrapCols = document.getElementsByName('photowrap');
for (var i = 0; i < wrapCols.length; i++) {
    var wrapCol = wrapCols[i];
    var captionnum = wrapCol.getElementsByClassName("caption")[0].innerHTML.length;
    if (captionnum == 0) {
      wrapCol.style.backgroundColor="#F6CEE3";
    } else if (captionnum < 50) {
      wrapCol.style.backgroundColor="#A7EAFF";
    } else {
      wrapCol.style.backgroundColor="#CEF6A3";
    }
}