选择兄弟元素的子元素

Posted 2023-03-29

【中文标题】选择兄弟元素的子元素

【英文标题】：Select child of sibling element

【发布时间】：2018-12-27 08:06:55

【问题描述】：

我有以下 html DOM。我的目标是获取“错误”文本。

<div class = "row">
   <div class ="col-sm-4">
      <input id = "firstName" type = "text"> John
      <div class = "mh-15">
         <div class = "text-danger">Error</div>
      </div>
   </div>
</div>

由于 class= "text-danger" 被重复了很多次，我的目标是通过从 id = "firstName" 开始并通过使用类似 xpath 祖先的东西来获取“错误”文本。我该怎么做？谢谢！

【问题讨论】：

input 节点是 <div class = "mh-15"> 的兄弟节点吗？

【参考方案1】：

X 路径：

//input[@id='firstName']/following-sibling::div[2]

注意<div class = "mh-15">应该是输入框的兄弟。

【讨论】：

刚刚更新：更安全的定位器：//input[@id='firstName']/following-sibling::*//div[@class='text-danger']

@Infern0 : text-danger 类正在改变，如 OP 所述。我不认为这将是一个好的选择。

我已经阅读了以下声明：'As class= "text-danger" 重复了很多次'，所以我的建议是相关的。

此 XPath 不能用作目标 div 不是第二个兄弟div，而是第一个兄弟div的子。检查@ewwink 答案

感谢您的快速回复。你们都提供了非常有帮助的答案。对我有用的是@infern0 的定位器，尽管它们都非常相似。

【参考方案2】：

ancestor 用于选择父元素，class="text-danger" 在id="firstName" 的元素之后，您必须使用following 或following-sibling 选择它

//input[@id="firstName"]/following-sibling::div/div
# or
//input[@id="firstName"]/following::div/div