使用 Javascript/jQuery 访问 id 属性不正确的 HTML 元素

发布于 2024-08-17 06:43:42 字数 493 浏览 9 评论 0原文

我正在为某人制作一个 Greasemonkey 脚本,以更改其 CRM(Zoho) 创建的某些字段的显示,因为他们无权更改呈现的 HTML。

这应该很容易,但是 Zoho 认为创建正确的 HTML 太麻烦了,我猜,他们的 HTML 包含这样的内容:

<input type="text" maxlength="50" style="width: 100%;" class="textField" id="property(Phone)" name="property(Phone)"/>

ID 包含空格和括号,它们在 ID 属性中无效,并且是阻止我使用 document.getElementById() 来选择它们或使用 jQuery 来选择它们。

有人对我如何抓住这个元素有任何想法吗?显然,我可以通过其父元素中的索引或遍历 DOM 来获取它,但这两者都意味着如果字段的顺序发生变化,Greasemonkey 脚本将停止正常工作,因为它会瞄准错误的元素。

I'm making a Greasemonkey script for someone to change the display of some of the fields their CRM(Zoho) created because they don't have access to change the rendered HTML.

This should be easy, BUT Zoho decided that creating proper HTML was too big a pain in the ass, I guess, and their HTML contains things like this:

<input type="text" maxlength="50" style="width: 100%;" class="textField" id="property(Phone)" name="property(Phone)"/>

The ID's contain spaces and parentheses, which aren't valid in ID attributes, and is preventing me from using either document.getElementById() to select them or from using jQuery to select them.

Does anyone have any ideas for how I could grab that element? Obviously I could grab it via its index in its parent element, or by traversing the DOM, but both of those would mean that if the order of the fields changed, the Greasemonkey script would stop working correctly because it would then be targeting the wrong elements.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

甜`诱少女 2024-08-24 06:43:42

您可以使用反斜杠转义空格和括号:

$('#property\\(Phone\\)').val('jQuery selected property(Phone)!');
$('#ab\\ cd\\ ef').val('jQuery selected ab cd ef!');

You can escape the spaces and parentheses using backslashes:

$('#property\\(Phone\\)').val('jQuery selected property(Phone)!');
$('#ab\\ cd\\ ef').val('jQuery selected ab cd ef!');
尤怨 2024-08-24 06:43:42

这是什么浏览器用的?我猜是 Firefox,因为你提到了 GreaseMonkey。但是 document.getElementById("property(Phone)") 似乎在 Firefox 3.5 中工作得很好。

What browser is this for? Firefox, I assume, since you mention GreaseMonkey. But document.getElementById("property(Phone)") seems to work just fine in Firefox 3.5.

∞觅青森が 2024-08-24 06:43:42

您可以像这样转义括号:

$("#property\\(Phone\\)")

You can escape the brackets like this:

$("#property\\(Phone\\)")
故人如初 2024-08-24 06:43:42

JQuery 可能无法使用 #id 语法找到它,但可能可以使用 tagName[id=value] 语法找到它......尝试一下,祝你好运。请参阅 jQuery 文档

JQuery probably can't find it using #id syntax, but could probably find it using tagName[id=value] syntax... try it, and good luck. See the jQuery doc.

只为一人 2024-08-24 06:43:42

您始终可以执行 document.getElementsByTagName('input'),然后浏览结果并将其与其属性(如类型和名称、类...)进行匹配。效率不是很高,但我知道这是适用于任何订单的唯一方法(因为 id 无效)...

var inputs = document.getElementsByTagName('input');
if (inputs)
    for (var i = 0; i < inputs.length; i++)
        if (inputs[i].type == 'text' && inputs[i].name == 'SearchValue')
            return inputs[i];

我很确定 JQuery(或任何其他好的框架)有与此片段等效的代码...

You could always do a document.getElementsByTagName('input'), then browse the results and match it with it's attributes (like it's type and name, class...). Not very efficient but the only way I know that will work with any order (since the id is invalid)...

var inputs = document.getElementsByTagName('input');
if (inputs)
    for (var i = 0; i < inputs.length; i++)
        if (inputs[i].type == 'text' && inputs[i].name == 'SearchValue')
            return inputs[i];

I'm pretty sure JQuery (or any other good framework) have an equivalent to this snippet...

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文