时间戳

首页 > 解决方案 > Javascript - 多次使用类名时如何获取特定行或跨度的值

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

标签： javascript

解决方案

您将希望使用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>

推荐阅读