对视图中的每一行重复javascript

我已经在Drupal中创建了一个视图。我正在使用JavaScript修改每行中的CSS。脚本在第一行上运行，但不会对视图中的其余行进行更改

以下是脚本：

<script language="javascript" type="text/javascript">

window.onload = floatbr;

function floatbr() {

var f = document.getElementById('firstright') // Get div element
var s = document.getElementById('secondright') // Get div element
var w = document.getElementById('catwrapper') // Get div element
var sh = s.offsetHeight // secondright div height
var wh = w.offsetHeight // catwrapper div height
f.style.height = wh - sh + 'px'; }

</script> 

window.onload=floatbr；
函数floatbr（）{
var f=document.getElementById（'firstright'）//Get div元素
var s=document.getElementById（'secondright'）//Get div元素
var w=document.getElementById（'catwrapper'）//Get div元素
var sh=s.offsetHeight//second right div height
var wh=w.offsetHeight//catwrapper div height
f、 style.height=wh-sh+'px'；}

我在本页使用它：

让脚本在页面中出现一次并不能奏效。 将脚本放在视图页脚中并重复该脚本不起作用

---

通过HTML、CSS和JavaScript链接到JSFIDLE的链接如下：。

很难从你的问题和你链接到的标记中分辨出你到底想做什么，所以这里有一些一般信息可以帮助你：

当前使用的函数，

getElementById

，返回一个元素：页面上具有该

id

值的元素。（

id

值在页面上必须是唯一的。）

要处理多个元素，您有几个选项。最受欢迎的两种：

• 您可以从给定元素开始，然后使用其

  childNodes

  、

  firstChild

  、

  nextSibling

  ，以及类似的属性从该元素导航到附近的其他元素
• 您可以使用

  getElementsByTagName

  （在

  文档上或在元素上）查找该容器中具有给定标记的所有元素（包括几层以下的元素）。例如，
  document.getElementsByTagName（“p”）
  为您提供页面上所有段落的
  节点列表

这些是“DOM”（文档对象模型）的属性和方法，它是浏览器在解析和呈现HTML时创建的元素树和相关信息

参考资料：

下面的示例显示了一些非常基本的操作（）：

HTML:

JavaScript:

(function() {

  hookEvent(window, "load", go);

  function go() {
    var list, index, div, container;

    // Get just the one element, turn it red
    document.getElementById("justOneDiv").style.color = "red";

    // Get the spans within the specific container
    container = document.getElementById("container");
    list = container.getElementsByTagName("span");

    // Loop through making those spans bold
    for (index = 0; index < list.length; ++index) {
      list.item(index).style.fontWeight = "bold";
    }

    // Get a NodeList of all divs on the page
    list = document.getElementsByTagName("div");

    // Loop it, turning "foo"s blue and "bar"s green
    for (index = 0; index < list.length; ++index) {
      div = list.item(index);
      if (/\bfoo\b/.test(div.className)) {
        div.style.color = "blue";
      }
      else if (/\bbar\b/.test(div.className)) {
        div.style.color = "green";
      }
    }
  }

  function hookEvent(element, eventName, handler) {
    // Very quick-and-dirty, recommend using a proper library,
    // this is just for the purposes of the example.
    if (typeof element.addEventListener !== "undefined") {
      element.addEventListener(eventName, handler, false);
    }
    else if (typeof element.attachEvent !== "undefined") {
      element.attachEvent("on" + eventName, handler);
    }
    else {
      element["on" + eventName] = handler;
    }
  }
})();

---

DOM是官方API；像jQuery这样的库提供了替代的或增强的API。它们非常有用且功能强大，但我建议您对DOM本身有一些了解，即使您使用了一个库，最终很少直接向DOM API编写代码。

Drupal提供并已经使用了它，所以您也应该使用它。Drupal有自己的功能，并附带了一些额外的JavaScript API，主要用于正确处理从PHP到JavaScript的变量传递，注册脚本以在页面加载和内容添加时运行，等等

---

jQuery有很好的文档记录并且很流行，所以查找文档、教程以及如何操作都很容易。它自己的页面是一个良好的开端。但它需要基本了解什么是XHTML文档以及它是如何构造的。

您的HTML是什么样子的？最好尝试设置一个显示问题的页面。如果没有要修改的行的标记示例，就不可能回答这个问题。当然，引用的代码不会修改多行，它只是将样式信息应用于单个元素（页面上具有

id

值“firstright”的一个元素）。@draevor:Both/and，链接到外部站点，无论是否引用问题中的相关标记，都是无用的。@t.J.Crowder对不起，但我不明白你的意思。要引用什么标记？我说的是缺少标记，建议她创建一个页面来重现这个问题。我在Fiddle中添加了代码链接。也与本页相同，如下所述：

(function() {

  hookEvent(window, "load", go);

  function go() {
    var list, index, div, container;

    // Get just the one element, turn it red
    document.getElementById("justOneDiv").style.color = "red";

    // Get the spans within the specific container
    container = document.getElementById("container");
    list = container.getElementsByTagName("span");

    // Loop through making those spans bold
    for (index = 0; index < list.length; ++index) {
      list.item(index).style.fontWeight = "bold";
    }

    // Get a NodeList of all divs on the page
    list = document.getElementsByTagName("div");

    // Loop it, turning "foo"s blue and "bar"s green
    for (index = 0; index < list.length; ++index) {
      div = list.item(index);
      if (/\bfoo\b/.test(div.className)) {
        div.style.color = "blue";
      }
      else if (/\bbar\b/.test(div.className)) {
        div.style.color = "green";
      }
    }
  }

  function hookEvent(element, eventName, handler) {
    // Very quick-and-dirty, recommend using a proper library,
    // this is just for the purposes of the example.
    if (typeof element.addEventListener !== "undefined") {
      element.addEventListener(eventName, handler, false);
    }
    else if (typeof element.attachEvent !== "undefined") {
      element.attachEvent("on" + eventName, handler);
    }
    else {
      element["on" + eventName] = handler;
    }
  }
})();

jQuery(function($) {

  // Get just the one element, turn it red
  $("#justOneDiv").css("color", "red");

  // Get the spans within the specific container
  // Loop through making those spans bold
  $("#container span").css("font-weight", "bold");

  // Turn all divs with the class "foo" blue
  $("div.foo").css("color", "blue");

  // Turn all divs with the class "bar" green
  $("div.bar").css("color", "green");
});