Question

我需要找到一个元素的兄弟姐妹。我想要获取的对象是嵌套输入。代码belove导航到td [2]，在这里我需要进行一些比较。比较完成后，我需要进入包含输入的td [4]。我确实尝试使用nextsibling函数，但出了点问题:(这是html的图像：HTML

var inputs = document.querySelectorAll("table.table.table-condensed.table-top-spacing tr td:nth-child(2)");
    inputs.forEach((input)=>{
        var final_input = input.find("input[name='quantity']");
        final_input.click;
    });

Answer 1

根据文档，使用Node.nextSibling Node.firstChild或Node.previousSibling可能是指空格文本节点，而不是实际元素。

您可以使用MDN文档here中引入的示例跟踪元素的同级。

var el = input;
i = 1;

while (el) {
  if(el.nodeName ==="TARGET_ELEMENT")
      break;
  console.log(i, '. ', el.nodeName);
  el = el.previousSibling;
  i++;
}

Answer 2

我认为您问题的根本原因是find不是HTML元素上存在的方法。您可能会误将其用于JQuery。

相反，您想使用parentElement.querySelector：

const cells = document.querySelectorAll('table tr td:nth-child(2)');
cells.forEach(cell => {
  if (cell.textContent === '1') {
    const input = cell.parentElement.querySelector('input[name="quantity"]');
    input.value = 'matched';
  }
})

<table>
  <tr>
    <td>cell</td>
    <td>1</td>
    <td>input</td>
    <td><input type="text" name="quantity" /></td>
  </tr>
  <tr>
    <td>cell</td>
    <td>0</td>
    <td>input</td>
    <td><input type="text" name="quantity" /></td>
  </tr>
  <tr>
    <td>cell</td>
    <td>1</td>
    <td>input</td>
    <td><input type="text" name="quantity" /></td>
  </tr>
</table>

如何在兄弟姐妹中获取嵌套选择器

2 个答案: