Javascript-多次使用类名时如何获取特定行或跨度的值

Question

<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获取只读字段的值，例如“ Rick”？ 我可以通过使用wb.document.getElementsByClassName（“ readonly-field”）获得该值，但是该行的值是动态的并且会发生变化。 我需要一个引用跨度为2的标签的解决方案。

Answer 1

这是使用id的值获取值的示例。 每个元素的ID应该唯一

 console.log(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> 

Answer 2

您将要使用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.log(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>