搜索 DOM 特定 DOM 元素的查询

Question

在下面的DOM中，如何搜索innerText为"Subtotal"的元素，并得到next/sibling元素得到实际值？在 Chrome 控制台中，我能够执行 $$('tbody[class="MuiTableBody-root"]')[5].children[0].children[1]

我特地寻找查询以搜索“小计”并获取兄弟姐妹。

<tbody class="MuiTableBody-root">
   <tr class="MuiTableRow-root">
      <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">Subtotal</td>
      <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">[=12=].00</td>
   </tr>
   <tr class="MuiTableRow-root">
      <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">Total</td>
      <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">[=12=].00</td>
   </tr>
   <tr class="MuiTableRow-root">
      <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">Total Price/Unit</td>
      <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">[=12=].00</td>
   </tr>
</tbody>

Answer 1

这对你有用吗？

jQuery(document).ready(() => {

  var $tds = jQuery("td").each(function(){
    if(this.innerText.trim().toLowerCase() == "subtotal"){
      console.log(this.innerText);
      let $adjacent = $(this).next();
      let amount = $adjacent.text().trim();
      console.log(amount);
    }
    
  });


})

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


</html>

<body>

  <table class="MuiTableBody-root">

    <tr class="MuiTableRow-root">
      <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">Subtotal</td>
      <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">[=11=].00</td>
    </tr>

    <tr class="MuiTableRow-root">
      <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">Total</td>
      <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">[=11=].00</td>
    </tr>
    <tr class="MuiTableRow-root">
      <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">Total Price/Unit</td>
      <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">[=11=].00</td>
    </tr>
  </table>
  
</body>

搜索 DOM 特定 DOM 元素的查询

Query to Search for DOM a Specific DOM element

javascript

webdriver-io