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

Question

嗨！

有人可以看看我的代码并告诉我哪里出了问题吗？（不，我没有权限编辑 HTML。）

我试图将 id="goToThis" 放在与 v(weekNumber) 匹配的第一个 parent 上，在本例中为 v2。

问题：它在每个 parent 上设置它，而不仅仅是匹配 "goToweek".

的那些

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

Javascript(RESULT = "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>........

Answer 1

[].forEach.call(document.querySelectorAll("td"), function(el, ind, arr) { // in this string we give all td elements and iterate they
    if (el.textContent === "v2" && !arr._mutching) { // search match element and watch flag
        el.parentNode.id = "goToThis"; // set for paren id
        arr._mutching = true; set flag for break all cycle
    }else{
        return;
    }
});

    <table>
        <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>v2</td>  <!-- will not mutch -->
        </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>
    </table>

Answer 2

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

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 附加到匹配年和周的第一个元素。

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

why does parentNode replace all elements of td and not the ones specified?

html

javascript

setattribute

parent-node