时间戳

首页 > 解决方案 > 为什么 parentNode 替换 td 的所有元素而不是指定的元素？

javascript - 为什么 parentNode 替换 td 的所有元素而不是指定的元素？

问题描述

你好！

有人可以看看我的代码并告诉我出了什么问题吗？（不，我无权编辑 HTML。）

我试图将id="goToThis"放在与 v(weekNumber) 匹配的第一个父级上，在这种情况下为 v2。

问题：它将它设置在每个父母身上，而不仅仅是那些匹配“goToweek”的父母。

我希望它只在第一个匹配的上添加“goToThis”。

Javascript（结果 = “2019, 2”）：

function setAttributes()
{ 

    var goToweek = "<td>v" + result[1] + "</td>"
        elementos = document.body.getElementsByTagName("td");

    for (var is = 0, length = elementos.length; is < length; is++)
    {   

        for (var cc in goToweek)
        {
            if (elementos[is].innerHTML.indexOf(goToweek[cc]) !== -1)
            {   

                parentOfTds2 = (elementos[is]).parentNode;
                parentOfTds2.setAttribute("id", "goToThis");
            }
        };
    };
}

示例 HTML：

<tr>
  <td>2016</td>
  <td>v2</td>
</tr>
<tr>
  <td>2016</td>
  <td>v4</td>
</tr>
<tr>
  <td>2016</td>
  <td>v5</td>
</tr>
<tr>
  <td>2016</td>
  <td>v6</td>
</tr>
<tr>
  <td>2016</td>
  <td>v7</td>
</tr>
<tr>
  <td>2016</td>
  <td>v8</td>
</tr>
<tr>
  <td>2016</td>
  <td>v22</td>
</tr>........

代码执行后：：

<tr id="goToThis">
  <td>2016</td>
  <td>v2</td>
</tr>
<tr id="goToThis">
  <td>2016</td>
  <td>v4</td>
</tr>
<tr id="goToThis">
  <td>2016</td>
  <td>v5</td>
</tr>
<tr id="goToThis">
  <td>2016</td>
  <td>v6</td>
</tr>
<tr id="goToThis">
  <td>2016</td>
  <td>v7</td>
</tr>
<tr id="goToThis">
  <td>2016</td>
  <td>v8</td>
</tr>
<tr id="goToThis">
  <td>2016</td>
  <td>v22</td>
</tr>........

我想：

<tr id="goToThis">
  <td>2016</td>
  <td>v2</td>
</tr>
<tr>
  <td>2016</td>
  <td>v4</td>
</tr>
<tr>
  <td>2016</td>
  <td>v5</td>
</tr>
<tr>
  <td>2016</td>
  <td>v6</td>
</tr>
<tr>
  <td>2016</td>
  <td>v7</td>
</tr>
<tr>
  <td>2016</td>
  <td>v8</td>
</tr>
<tr>
  <td>2016</td>
  <td>v22</td>
</tr>........

标签： javascripthtmlsetattributeparent-node

解决方案

这是我提出的一个快速解决方案。

function setAttributes() { 
   const elementos = document.getElementsByTagName("tr");
   for (let is = 0; is < elementos.length; is++) { 
      const innerElements = elementos[is].children;
      if (innerElements[0].innerHTML === (""+result[0]) && innerElements[1].innerHTML === ("v"+result[1])) {   
          elementos[is].id = "goToThis";
          break;
      }
   }
}

我从您的示例中发现的问题是，即使您innerHTML将元素的 与goToWeek您如何确定td年份与结果数组中的年份相同？

为了避免这种情况，td我没有获取所有tr元素，而是检查了年份和星期是否匹配，并将 id 添加到相应的tr父级并跳出循环。这应该将goToThis附加到匹配年和周的第一个元素。

推荐阅读