单击 TR 元素中的复选框

Question

我想根据用户电子邮件选中该复选框。我尝试这样的一些东西，但不起作用："无效状态错误：异常被抛出调试器评估代码：1"。

$x("//span[text()='[e-mail]']/parent::div/previousElementSibling::td");

我做错了什么？谢谢！

<td class="col checkUser selection">
<div class="checkbox um-checkbox">
<input type="checkbox" value="option1">
<label data-select-checkbox="" data-ngretain="u-cd324c08-f215-5784-87b7-98944b18819f"></label>
</div>
</td>
<td class="col userData item-collapse item-top">
<div class="showUserDetails" title="My User" data-id="u-cd324c08-f215-5784-87b7-98944b18819f">
<span class="text-overflow " style="max-width: 90%;display: inline-block;">
<span class="first-name">My </span>
<span class="first-name">User </span>
</span>
<span>
<a href="#" class="hide" style="display: inline-block;"><img style="height: 24px;width:24px;margin-left: 5px;" src="/Admin/img/admin-gray.svg"></a>
</span>
</div>
</td>
<td class="col userData item-collapse item-top">
<div class="showUserDetails text-overflow" title="[e-mail]" data-id="u-cd324c08-f215-5784-87b7-98944b18819f">
<span class="first-name">[e-mail] </span>
</div>
</td>

Answer 1

previousElementSibling

不是XPath 选择器，而是元素的属性：https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling

XPath 的一个几乎相似的选择器是preceding-sibling选择器。但这将返回所有前面的同级，因此您必须使用[1]选择器将结果最大化为 1：

/preceding-sibling::div[1]

然后，您仍然只需要选择包含复选框类的div，因此您将需要[contains(@class, 'checkbox')]选择器并使用/input选择器选择输入。

复选框的完整选择器如下所示：

$x("//span[text()='[e-mail]']/parent::div/preceding-sibling::div[contains(@class, 'checkbox')][1]/input")

但是，如果您使用的是document.evaluate而不是$x则需要将text()='the text'选择器替换为contains(. ,'the text')选择器，因为text((选择器在document.evaluate方法中不起作用。

完整的可执行代码片段：

var doc = document.children[0].children[1];
var checkbox = document.evaluate(
"//span[contains(., '[e-mail]')]/parent::div/preceding-sibling::div[contains(@class, 'checkbox')][1]/input",
doc,
null,
XPathResult.ANY_TYPE,
null
).iterateNext()
console.log(checkbox)
alert(checkbox)

<td class="col checkUser selection">
<div class="checkbox um-checkbox">
<input type="checkbox" value="option1">
<label data-select-checkbox="" data-ngretain="u-cd324c08-f215-5784-87b7-98944b18819f"></label>
</div>
</td>
<td class="col userData item-collapse item-top">
<div class="showUserDetails" title="My User" data-id="u-cd324c08-f215-5784-87b7-98944b18819f">
<span class="text-overflow " style="max-width: 90%;display: inline-block;">
<span class="first-name">My </span>
<span class="first-name">User </span>
</span>
<span>
<a href="#" class="hide" style="display: inline-block;"><img style="height: 24px;width:24px;margin-left: 5px;" src="/Admin/img/admin-gray.svg"></a>
</span>
</div>
</td>
<td class="col userData item-collapse item-top">
<div class="showUserDetails text-overflow" title="[e-mail]" data-id="u-cd324c08-f215-5784-87b7-98944b18819f">
<span class="first-name">[e-mail] </span>
</div>
</td>