Использование Javascript / jQuery для доступа к элементам HTML с неправильным атрибутом id

Question

Я делаю скрипт Greasemonkey, чтобы кто-то мог изменить отображение некоторых полей, созданных в CRM (Zoho), потому что у них нет доступа для изменения отображаемого HTML.

Это должно быть легко, НО Зохо решил, что создание правильного HTML было слишком большой болью в заднице, я думаю, и их HTML содержит такие вещи:

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

Идентификаторы содержат пробелы и круглые скобки, которые недопустимы в атрибутах идентификатора и не позволяют мне использовать document.getElementById () для их выбора или использовать jQuery для их выбора.

У кого-нибудь есть идеи, как я мог бы схватить этот элемент? Очевидно, что я мог получить его через его индекс в родительском элементе или через DOM, но оба из них означали бы, что если бы порядок полей изменился, сценарий Greasemonkey перестал работать правильно, потому что тогда он нацелился бы на неправильные элементы .

Answer 1

Вы можете избежать пробелов и скобок, используя обратную косую черту:

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

Answer 2

Вы можете выйти из скобок следующим образом:

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

Answer 3

Для чего этот браузер? Firefox, я полагаю, поскольку вы упоминаете GreaseMonkey. Но document.getElementById("property(Phone)"), похоже, прекрасно работает в Firefox 3.5.

Answer 4

JQuery, вероятно, не может найти его с помощью синтаксиса #id, но, вероятно, может найти его с помощью синтаксиса tagName [id = value] ... попробуйте, и удачи. См. jQuery документ .

Answer 5

Вы всегда можете сделать document.getElementsByTagName ('input'), затем просмотреть результаты и сопоставить их с их атрибутами (такими как тип и имя, класс ...). Не очень эффективно, но единственный способ, которым я знаю, будет работать с любым заказом (поскольку идентификатор недействителен) ...

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 (или любой другой хороший фреймворк) имеет эквивалент этого фрагмента ...