Question

我有这个：

<div class="graph">
  <rect y="2%" class="rect"></rect>
  <text>1</text>
  <rect y="15%" class="rect"></rect>
  <text>2</text>
  <rect y="11%" class="rect"></rect>
  <text>3</text>
</div>

这样的数组：var labels = ["one", "two", "three"];

我这样做：

labels.forEach(function (label, index) {
        if (index == 0) {
           // get first rect and text tag
        } else if (index == 1) {
           // get second rect and text tag
        } else {
           // get third rect and text tag
        }

    })

我想在第一次迭代中获得第一个“rect”HTML标记和第一个“text”HTML标记;在第二次迭代中，第二次迭代和第三次迭代中的第三次。

Answer 1

您可以通过querySelectorAll获取您的rects，这比getElementsByClassName

更受支持

标记 document.querySelectorAll("rect")或
类 document.querySelectorAll(".rect")

并与正常for循环结合使用，因为forEach不适用于节点列表 - read more here。

＆＃13;

var labels = ["one", "two", "three"];
window.onload=function() {
  var rects = document.querySelectorAll("rect");
/*  
  rects.forEach(function(rect,index) { // fails
    rects.appendChild(document.createTextNode(labels[index]));
  });
*/  
  for (var i=0;i<rects.length;i++) {
    rects[i].appendChild(document.createTextNode(labels[i]));
  };
  
}

＆＃13;

<div class="graph">
  <rect y="2%" class="rect"></rect>
  <text>1</text>
  <rect y="15%" class="rect"></rect>
  <text>2</text>
  <rect y="11%" class="rect"></rect>
  <text>3</text>
</div>

＆＃13;

Answer 2

您可以通过className获取所有 rects ，然后相对定位文本元素：

var rects = document.getElementsByClassName('rect');
var curRect, curIndex;
for(var i=0; i<rects.length; i++){

    curRect = rects[i];
    curIndex = curRect.nextSibling.innerHTML;

    switch(curIndex){
        case "0":
            //do something
            break;
        case "1":
            //do something
            break;
        case "2":
            //do something
            break;
        default:
            //default behavior
    }
}

请记住，这都是相对的，换句话说，如果结构发生变化，它可能会破裂。分配可以直接选择它们的东西可能更好。例如，如果你有以下结构：

<div class="graph">
   <rect y="2%" class="rect"></rect>
   <text id="rect-text-1">1</text>
   <rect y="15%" class="rect"></rect>
   <text id="rect-text-2">2</text>
   <rect y="11%" class="rect"></rect>
   <text id="rect-text-3">3</text>
</div>

然后你可以做

for(var i=0; i<rects.length; i++){
    curIndex = document.getElementById('rect-text-' + i).innerHTML;
}

通过ID进行定位比相对更可靠，因为它与结构无关。

Answer 3

您好，您可以在您的html页面中尝试此代码：

<div class="graph" >
  <rect y="2%" class="rect"></rect>
  <text id="one">1</text>
  <rect y="15%"  class="rect"></rect>
  <text id="two">2</text>
  <rect y="11%"  class="rect"></rect>
  <text id="three">3</text>
</div>

<script type="text/javascript">
var labels = ["one", "two", "three"];
labels.forEach(function (label, index) {

        if (index == 0) {
            document.getElementById("one").innerHTML = "TEST WRITE";
           // get first rect and text tag
        } else if (index == 1) {
           // get second rect and text tag
        } else {
           // get third rect and text tag
        }

    })
</script>

将您的Javascript代码放在HTML之后。

Answer 4

<div class="graph">

</div>
<script>
var string = "";
var labels = ["one", "two", "three"];
     labels.forEach(function (label, index) {
        if (index == 0) {
           // get first rect and text tag
           string = string + '<rect y="2%" class="rect"></rect>'+
                    '<text>1</text>';
        } else if (index == 1) {
           string = string + '<rect y="15%" class="rect"></rect>'+
                    '<text>2</text>';
        } else {
           string = string + '<rect y="11%" class="rect"></rect>'+
                    '<text>3</text>';
        }

    });
$(".graph").append(string);
</script>

Answer 5

你可以按班级获得所有直觉。

var elements = document.getElementsByClassName("rect");

你可以像你一样迭代并使用索引来匹配

var labels = ["one", "two", "three"];
var elements = document.getElementsByClassName("rect");

labels.forEach(function (label, index) {
    alert(label + ": " +  elements[index].getAttribute("y"));
});

您可以在https://jsfiddle.net/7Lecaezy/

看到它

Answer 6

我也会在这里推荐jQuery。具体来说是nth-child。

如何使用javascript在HTML中获取具体元素

6 个答案: