Javascript - как получить значение определенной строки или диапазона, когда имя класса используется много раз
<div class = "toggler">
<div class = "ui-widget-content ui-corner-all">
<h3 class = "ui-widget-header ui-corner-all togglerHeader">
Retail Customer</h3>
<div class = "togglerContent">
<div class = "container container-peloton">
<div class = "row">
<div class = "span2 offset2">
<input data-val = "true" data-val-required = "The CustomerIsBusiness field is required." disabled = "disabled" id = "rbRetailCustomerIsBusinessYes" name = "Connect.CustomerIsBusiness" type = "radio" value = "True" />
<label for = "rbRetailCustomerIsBusinessYes" style = "padding-right: 60px">
Business</label>
</div>
<div class = "span2">
<input checked = "checked" disabled = "disabled" id = "rbRetailCustomerIsBusinessNo" name = "Connect.CustomerIsBusiness" type = "radio" value = "False" />
<label for = "rbRetailCustomerIsBusinessNo">
Individual</label>
</div>
</div>
<div class = "row">
<div class = "span6">
<div class = "row">
<div class = "span2 text-right"><label for = "Connect_CustomerFirstName">First Name</label></div>
<div class = "span4">
<span class = "readonly-field">Rick</span>
В приведенной выше таблице, как я могу получить значение полей только для чтения, например. «Рик» с использованием Javascript? Я могу получить значение, используя wb.document.getElementsByClassName ("readonly-field"), однако значение строки является динамическим и изменяется. Мне нужно решение, которое ссылается на метку в диапазоне 2.
Есть мероприятие? Вы нажимаете что-то, что вызывает желание это искать?
Идентификаторы @chevybow не должны быть "переходным" способом получения ссылок на DOM. Они достаточно просты, но вы обнаружите, что они создают хрупкие решения, которые не всегда хорошо масштабируются. Кроме того, лучше не использовать W3 Schools, которые, как известно, содержат неполную, устаревшую или полностью неверную информацию, и вместо этого использовать MDN
Уточните, пожалуйста, что вы ищете. Сначала вы говорите, что вам нужно значение полей .read-only, например «Rick», а затем говорите, что вам нужны элементы label в элементах div, которые используют классы .span2.
@ScottMarcus Каким будет ваш способ получения произвольного значения диапазона?
Сначала я должен добавить, что просматриваю эту страницу в Интернете. Я ищу значение полей только для чтения, которых много на странице, но мне нужно там соответствующее значение text / span2 метки.
@chevybow document.querySelector()
@JoeGlass Как я уже просил, поясните, пожалуйста. В приведенном выше примере элемент .read-only не имеет «соответствующего» значения label или .span2. Какой точно вам нужен. Пожалуйста, будьте предельно ясны.
@ScottMarcus В заголовке четко указано, «когда имя класса используется много раз». Если есть несколько совпадений, а queryselector просто возвращает первое совпадение - как это решает проблему с использованием уникального идентификатора? Что делать, если вам не нужен первый матч? OP может быть непонятным, но я не уверен, что понимаю ваш подход
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Это пример получения значения с помощью id. Идентификатор должен быть уникальным для каждого элемента
console.info(document.getElementById('sample_id').innerHTML)<div class = "toggler">
<div class = "ui-widget-content ui-corner-all">
<h3 class = "ui-widget-header ui-corner-all togglerHeader">
Retail Customer</h3>
<div class = "togglerContent">
<div class = "container container-peloton">
<div class = "row">
<div class = "span2 offset2">
<input data-val = "true" data-val-required = "The CustomerIsBusiness field is required." disabled = "disabled" id = "rbRetailCustomerIsBusinessYes" name = "Connect.CustomerIsBusiness" type = "radio" value = "True" />
<label for = "rbRetailCustomerIsBusinessYes" style = "padding-right: 60px">
Business</label>
</div>
<div class = "span2">
<input checked = "checked" disabled = "disabled" id = "rbRetailCustomerIsBusinessNo" name = "Connect.CustomerIsBusiness" type = "radio" value = "False" />
<label for = "rbRetailCustomerIsBusinessNo">
Individual</label>
</div>
</div>
<div class = "row">
<div class = "span6">
<div class = "row">
<div class = "span2 text-right"><label for = "Connect_CustomerFirstName">First Name</label></div>
<div class = "span4">
<span class = "readonly-field" id = "sample_id">Rick</span>Вы захотите использовать element.querySelector() и element.closest(), чтобы иметь действительно динамичный способ получения желаемых результатов.
// First, locate the element with the readonly-field class
let ro = document.querySelector(".readonly-field");
// Then, get it's nearest ancestor that has the row class
let row = ro.closest(".row");
// Then, get the first label that is a child of the row
let lbl = row.querySelector("label");
// Finally, do what you want with that label
console.info(lbl.textContent + ": " + ro.textContent);<div class = "toggler">
<div class = "ui-widget-content ui-corner-all">
<h3 class = "ui-widget-header ui-corner-all togglerHeader">
Retail Customer</h3>
<div class = "togglerContent">
<div class = "container container-peloton">
<div class = "row">
<div class = "span2 offset2">
<input data-val = "true" data-val-required = "The CustomerIsBusiness field is required." disabled = "disabled" id = "rbRetailCustomerIsBusinessYes" name = "Connect.CustomerIsBusiness" type = "radio" value = "True" />
<label for = "rbRetailCustomerIsBusinessYes" style = "padding-right: 60px">
Business</label>
</div>
<div class = "span2">
<input checked = "checked" disabled = "disabled" id = "rbRetailCustomerIsBusinessNo" name = "Connect.CustomerIsBusiness" type = "radio" value = "False" />
<label for = "rbRetailCustomerIsBusinessNo">
Individual</label>
</div>
</div>
<div class = "row">
<div class = "span6">
<div class = "row">
<div class = "span2 text-right"><label for = "Connect_CustomerFirstName">First Name</label></div>
<div class = "span4">
<span class = "readonly-field">Rick</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Использовать идентификатор w3schools.com/css/css_syntax.asp