XPath组合两个子节点条件筛选父节点的语法问题

问题原因及修复方案 #

• 你组合条件时的核心问题出在两个问题：

1. 组合后的XPath里，第二个条件的DOM层级写错了，单独测试时你用./div/a/div/div匹配class为fruit的div，组合后误写成./div/div/a/div/div，多了一层div层级，自然匹配不到符合条件的节点。
2. data-price属性默认是字符串类型，直接用<=比较会按字符串规则判断，比如字符串'100'会被判定小于'2'，转成数值再比较更稳妥。
3. 写死后代路径很容易因为实际DOM结构的细微变动匹配失败，直接用后代选择器匹配任意后代节点更灵活，刚好对应你「后代中存在符合条件的节点的需求。

正确的XPath写法 #

通用写法（不限制后代层级，只要后代存在符合条件的节点即可）：

//*[@id="list-overview"]/div[.//*[@data-price <= number(@data-price) and @data-price <= 20] and .//div[@class='fruit' and contains(text(), 'Orange')]]

如果要严格沿用你之前的路径写法，修正层级对齐单独测试的路径即可：

//*[@id="list-overview"]/div[./div/a/div/div/div[@data-price <= number(@data-price) and @data-price <=20] and ./div/a/div/div[@class='fruit' and contains(.,'Orange')]]

验证方法 #

你可以先单独在控制台执行两个条件的匹配，确认匹配的元素有交集：

1. 先获取符合价格条件的父div集合：$x("//*[@id='list-overview']/div[.//*[@data-price<=20]]")
2. 再获取符合水果条件的父div集合：$x("//*[@id='list-overview']/div[.//div[@class='fruit' and contains(.,'Orange')]]")
3. 确认两个集合存在公共元素后，再执行组合后的XPath即可。

内容的提问来源于stack exchange，提问作者stackcen