2

我正在尝试将一组 div“gallerybox”（位于另一个 div “galleryimages”内）的 ID 设置为递增增量，即。图片1、图片2等

我见过类似的问题，并试图绕过它们，但这很困难。现在我的问题是，我从这里的第二行得到什么？什么是“画廊盒子”？我是否能够像我尝试的那样像数组和标签 ID 一样循环遍历它？

var galleryimages = document.getElementById("galleryimages");
var galleryboxes = galleryimages.getElementsByTagName("div");

var k = 1;

for (var i = 0; i < galleryboxes.length; i++) {
galleryboxes[i].setAttribute=("id", "picture" + k);
k++;
}

代码似乎有效，但我认为我实际上并没有标记我想要标记的 div；我检查“picture1”的内容是什么，它显示为空（它应该充满了图片和一些文字）。

4

5 回答 5

5

我从这里的第二行得到什么？

有问题的行是这样的：

var galleryboxes = galleryimages.getElementsByTagName("div");

这样做的目的是提供一个nodeList完整的带有标签名称的所有元素，<div>这些元素是变量所galleryimages代表的元素的子元素。请注意，这不是一个实际的数组，并且数组和 a 之间有区别特征nodeList。最值得注意的是， anodeList不从Array构造函数继承，因此不包含所有数组通用的基本方法，如push、pop和。sort

我是否能够像我尝试的那样像数组和标签 ID 一样循环遍历它？

是的。这对我们来说很容易，因为幸运nodeList的是 s 有一个length属性。您已经展示了如何遍历它们，但是您设置属性的行格式不正确：

galleryboxes[i].setAttribute=("id", "picture" + k);

等号不应该在那里。这会引发语法错误。如果你把等号去掉，代码就可以正常工作。

于 2012-12-22T19:08:41.997 回答
3

galleryboxes给你一个节点列表，你可以像数组一样迭代它，但你在这里有一个错误

galleryboxes[i].setAttribute=("id", "picture" + k);

应该

galleryboxes[i].setAttribute("id", "picture" + k);

注意缺乏=

也可以使用 id 属性来完成。

galleryboxes[i].id = "picture" + k;
于 2012-12-22T19:02:25.273 回答
0

galleryboxes 是一个数组，其中包含元素“galleryimages”中的所有 div

<html>
<head>
    ...
<head>
<body>
    <div id="galleryimages">   
        <div class="img_container"></div>
        <p>This text will not be in the array...</p>
        <div class="img_container"></div>
        <div class="img_container"></div>
    </div>
</body>
</html>

如果您的代码与上面类似，则该变量galleryboxes将仅包含 div。

至于当您检查“picture1”的内容时，它可能为空，我想您已经在 css 中为#picture1 定义了背景图像，对吗？

无论如何，您应该做的就是使用诸如 firebug 之类的东西来查看生成的 DOM。这样你可以更容易地调试。

于 2012-12-22T19:07:54.500 回答
0

galleryboxes[i].id如果您以后想以编程方式访问它（至少如果您希望它始终如一地工作），您将需要直接设置该属性 ( )。所以：

var galleryimages = document.getElementById("galleryimages");
var galleryboxes = galleryimages.getElementsByTagName("div");

for (var i = 0; i < galleryboxes.length; i++) {
    galleryboxes[i].id = "picture" + (i + 1);
}

有关示例，请参见此 jsfiddle。

于 2012-12-22T19:08:32.397 回答
0

我知道，您在这里寻找 javascript 答案，但您也可以尝试使用此 jQuery 代码，如果您也想的话：

$("#galleryimages > div").each(function(i) {
    $(this).prop("id", "picture" + (i + 1));
});​

只看 3 行代码 :)

于 2012-12-22T19:22:58.053 回答