Я разрабатываю форму с помощью инструмента, в котором идентификатор поля изменяется от среды к среде. Поэтому я хотел определить что-то, что ищет идентификатор в каждой форме. Вот код фрагмента:
</div>
</div>
</td>
</tr>
</table>
</span>
</td>
<td class="ml-Col ml-SpcrCol">
</td>
<td class=" FieldLabel ml-FldLbl ml-BrdRight lo_20150 ml-BrdBottom" style="width:15%;">
<span id="loitem20150">
<img id="1234requiredImg" class="required-icon" src="/grc/BackgroundImageGenerator.axd?className=Bullet&classProperties=bulletShape:RequiredIndicatorWidget;baseColor:%23B80000" alt="Required" style="display:none;" />
Submission Status:
</span>
</td>
<td class="ml-FldCnt lo_20150 ml-BrdBottom" style="width:35%;">
<span id="master_DefaultContent_abc_s1243_f1234c" class="ComboboxWrapper">
<table cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
и вот фрагмент кода JS:
var submitStatId = "master_DefaultContent_abc_s1243_f1234c";
Я пытаюсь для регулярного выражения, которое может искать идентификатор в источнике html. Подобно поиску тегов после статуса отправки и поиска идентификатора в этих тегах.
Спасибо, gaurav
Я чувствую, что мне что-то не хватает, но если вы знаете идентификатор, который вы ищете, и ваш HTML загружен (и ваш DOM готов), это должно быть довольно простым. Учитывая существующий код здесь:
var submitStatId = "master_DefaultContent_abc_s1243_f1234c";
, , в JavaScript вы бы сделали следующее:
var targetElement = document.getElementById(submitStatId);
, , и в JQuery это будет:
var $targetElement = $("#" + submitStatId);
Это даст вам ссылку на элемент, который вы ищете (узел DOM в JavaScript, объект JQuery в JQuery). В этот момент вы сможете использовать эту ссылку для получения любой информации, которая вам нужна о элементе, который имеет этот идентификатор.
ОБНОВИТЬ
Хорошо, теперь, когда у меня есть лучшее понимание проблемы, позвольте мне предложить два варианта:
1. Обеспечьте, чтобы
Если вы можете изменить внутренний код, наиболее простым способом определения идентификатора, который вы ищете, является то, чтобы внутренний код его захватил и предоставил, когда он отображает HTML.
Это было бы так же просто, как вывод следующего кода, где-то в документе HTML:
<script>
var submitStatId = "WHATEVER_THE_CURRENT_VALUE_IS";
</script>
Обычно такие данные хранятся где-то в системе в месте, где фоновое устройство может захватывать его и передавать его в интерфейс.
2. Используйте правило, основанное на структуре DOM, чтобы определить, какой элемент вы ищете
Если формат HTML достаточно статичен, иногда вы можете определить элемент, основанный на том, где он попадает в структуру. Это более сложно сделать с JavaScript, но на самом деле довольно просто с JQuery:
Поскольку вы упомянули, что этот элемент всегда будет появляться после метки "Статус представления", вы можете использовать это как базу для поиска нужного элемента. , , вы бы сделали что-то вроде этого:
var $submissionStatusElement = $("table tr td span:contains('Submission Status:')").first();
var $targetElement = $submissionStatusElement.closest("td").next().find("span").first();
Этот пример немного грязный, так как я не уверен в общей структуре HTML, но, если не что иное, он демонстрирует, как JQuery позволяет вам делать что-то вроде этого. В принципе, это ломается так:
$submissionStatusElement
- захватывает элемент, который встречается в <td>
до того, который вы хотите, но может быть любым элементом, который, как вы знаете, всегда будет в одном и том же месте, в зависимости от элемента, который вы ищете$("table tr td span:contains('Submission Status:')")
- это выбирает все промежутки, содержащие текст "Статус отправки:", которые находятся в <td>', which is in a
, which is in a
"чем конкретнее, что вы можете быть, тем быстрее JQuery будет найти то, что вы ищете, и тем лучше ваши шансы не случайно подбирая элемент, который вы не намерены. .first();
- На всякий случай, если селектор обнаруживает более одного диапазона, который имеет текст "Статус отправки:", это будет отфильтровывать выделение только до первого элемента (т.е. Первого найденного <span>
).
$targetElement
- захватывает элемент, который вы в конечном счете ищете.
$submissionStatusElement
- это "якорный элемент", который вы только что обнаружили выше.closest("td")
- это перемещение дерева DOM до тех пор, пока оно не ударит по первому <td>
элементу <td>
. Поскольку <span>
который вы нашли, на самом деле находится в <td>
, вы могли бы также использовать .parent()
, но .closest()
позволяет использовать дополнительные уровни DOM между вашим стартовым элементом и тем, который вы ищете..next()
- это находит следующий элемент "sibling" для <td>
который вы только что нашли.find("span")
- это поиск тегов <span>
внутри этого <td>
.first();
- снова это фильтрует результаты до самого первого найденного <span>
. Итак, на данный момент $targetElement
должен быть объектом JQuery, который указывает на узел DOM, который вы искали. Таким образом, вы действительно нашли его, не зная, что такое атрибут id
(хотя, если он вам все еще нужен, вы можете получить его с помощью: $targetElement.attr("id");
).
Версия JavaScript это немного сложнее, поэтому я не буду вводить ее, если вам это не понадобится. :)
<script>
в HTML (или в файле cookie, или в чем-то подобном, к которому вы можете получить доступ с помощью JavaScript), или (2) определите шаблон, который вы можете использовать, который всегда будет указывать на правильный элемент. , , например, всегда ли он находится в последнем <td>
определенной строке таблицы, в которой он находится? Всегда ли он находится в <td>
после «Статус отправки»? Если вы можете определить шаблон набора для того, где этот элемент появится, вы можете найти элемент без идентификатора.
Не понятно, как определить идентификатор, поэтому я принял идентификатор, начинающийся с "master":
var submitStatId = html.replace(/[\s\S]*<span id=\"(master_\S+)\"[\s\S]*/, "$1");
См. JSFiddle