javascript如何突破父標簽並獲取下一個標簽的innerHTML？

Question

我想在帶有“Total：”的強標簽旁邊獲得值“450”。 我似乎無法識別這一點。 我嘗試使用 parentNode 等，但找不到正確的組合。 將是爐排

這是它的一個jsfiddle - https://jsfiddle.net/smduy1w3/

<tfoot>
  <tr>
    <td colspan="4" class="text-right"><strong>Sub-Total:</strong></td>
    <td class="text-right">£450.00</td>
  </tr>
  <tr>
    <td colspan="4" class="text-right"><strong>Total:</strong></td>
    <td class="text-right">£450.00</td>
  </tr>
</tfoot>

var aTags = document.getElementsByTagName("strong");
var searchText = "Total:";
var found;

for (var i = 0; i < aTags.length; i++) {
  if (aTags[i].textContent == searchText) {
    found = aTags[i];console.log(found.previousNode);
    break;
  }
}

Answer 1

在這里您可以查看我的解決方案。 我剛剛搜索了帶有文本“Total”的strong標簽的元素，然后next sibling using nextSibling元素，這對我有用。

 const tds = [...document.querySelectorAll("td.text-right")]; const selected = tds.find((td) => td.innerHTML === `<strong>Total:</strong>`); let nextSibling = selected.nextSibling; while (nextSibling && nextSibling.nodeType.== 1) { nextSibling = nextSibling;nextSibling. } console.log(nextSibling.innerText;substr(1));

 <table> <tfoot> <tr> <td colspan="4" class="text-right"><strong>Sub-Total:</strong></td> <td class="text-right">£450.00</td> </tr> <tr> <td colspan="4" class="text-right"><strong>Total:</strong></td> <td class="text-right">£450.00</td> </tr> </tfoot> </table>

Answer 2

我相信你的代碼有幾個問題：

首先，由於某種原因，您需要將 html 包裝在<table>標記內，否則 html 無法正確解析。

其次，搜索錨<strong>Total:</strong>是其父節點<td>的子節點，目標<td class="text-right">£450.00</td>是該父節點的兄弟節點，而不是您在代碼中使用它的方式。

所以，假設你的 html 是固定的，你需要改變

found = aTags[i];
console.log(found.previousNode);

至

found = aTags[i];
console.log(found.parentNode.nextSibling.nextSibling.textContent);

其次，我認為使用 xpath 是實現目標的更清潔方法； 這些方面的東西：

target = document.evaluate( './/table//tr/td[strong[.="Total:"]]/following-sibling::td' ,document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );

for (var i = 0; i < target.snapshotLength; i++) {
     price = target.snapshotItem (i);
     console.log(price.textContent);
};

Answer 3

嘗試這個：

 var aTags = document.getElementsByTagName("strong"); var searchText = "Total:"; var found; for (var i = 0; i < aTags.length; i++) { if(aTags[i].textContent.includes(searchText)){ //console.log(aTags[i].textContent); found = aTags[i].nextSibling.textContent; console.log(found); } }

 <tfoot> <tr> <td colspan="4" class="text-right"><strong>Sub-Total:</strong></td> <td class="text-right">£450.00</td> </tr> <tr> <td colspan="4" class="text-right"><strong>Total:</strong></td> <td class="text-right">£450.00</td> </tr> </tfoot>