javascript - how to get value of dl tag HTML from jquery - Stack Overflow

admin管理员组

文章数量:1292244

I want to select the following value from the HTML file either by Jquery or Javascript. Bank Transfer, can some one suggest me how can i do.

<div class="color-me" id="txnDetails">
  <div class="panel-apply-font-size">
    <div class="row">
      <div class="cols">
        <dl class="entityDetails-field">
          <dt>PaymentMethod</dt>
          <dd>Bank Transfer</dd>
        </dl>
      </div> <!--end of cols-->
      <div class="cols">
        <dl class="entityDetails-field">
          <dt>AccountNumber</dt>
          <dd>34343</dd>
        </dl>
      </div> <!--end of cols-->
      <div class="cols">
        <dl class="entityDetails-field">
          <dt>BankName</dt>
          <dd>Bank Of America</dd>
        </dl>
      </div> <!--end of cols-->
    </div><!--end of rows-->
  </div><!--end of panel-->
</div><!--end of color me-->

I was doing like this:

$("#txnDetails dd").on(function(){
    $(this)....
});

here I don't have any class-names nor ID tags given for DT , DD elements, how can I get to the first DD tag to pick it's text? I want the text of first DD tag that is value "Bank Transfer".

I want to select the following value from the HTML file either by Jquery or Javascript. Bank Transfer, can some one suggest me how can i do.

<div class="color-me" id="txnDetails">
  <div class="panel-apply-font-size">
    <div class="row">
      <div class="cols">
        <dl class="entityDetails-field">
          <dt>PaymentMethod</dt>
          <dd>Bank Transfer</dd>
        </dl>
      </div> <!--end of cols-->
      <div class="cols">
        <dl class="entityDetails-field">
          <dt>AccountNumber</dt>
          <dd>34343</dd>
        </dl>
      </div> <!--end of cols-->
      <div class="cols">
        <dl class="entityDetails-field">
          <dt>BankName</dt>
          <dd>Bank Of America</dd>
        </dl>
      </div> <!--end of cols-->
    </div><!--end of rows-->
  </div><!--end of panel-->
</div><!--end of color me-->

I was doing like this:

$("#txnDetails dd").on(function(){
    $(this)....
});

here I don't have any class-names nor ID tags given for DT , DD elements, how can I get to the first DD tag to pick it's text? I want the text of first DD tag that is value "Bank Transfer".

• javascript
• jquery
• html

Share Improve this question Follow edited Jun 24, 2014 at 1:45 Roko C. Buljan 207k4141 gold badges327327 silver badges337337 bronze badges asked Jun 24, 2014 at 1:39 user3681484user3681484 3522 silver badges99 bronze badges 3

• try $(#txnDetails dd:first).text() – Tamil Selvan C Commented Jun 24, 2014 at 1:42
• on what? What's the user event you're interested in? click, hover? can you be just a bit more precise? Whave you googled or explored SO on "how to get first children element of-type?" or anything similar? – Roko C. Buljan Commented Jun 24, 2014 at 1:46
• On a side note your HTML seems exessive, there is a lot of nesting going on there. Do you really need an entire div to apply the style panel-apply-font-size? Are you aware you can apply more than one classto an element? E.g for your top div could be <div class="color-me panel-apply-font-size" id="txnDetails">. Do you really need the col divs? You probably could remove those and just use the dls for your colums. – Jon P Commented Jun 24, 2014 at 2:01

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Use

$('#txnDetails dd:first').text()

or

$('#txnDetails').find('dd').first().text()

Try the :nth-child() selector:

$("dd:nth-child(1)").text();

You only need to know the position the element you are targeting is in.

Required Reading:

http://api.jquery./nth-child-selector/

You can use the following:

 $("#txnDetails dd").first().text()

You should be able to get the values with:

$('#txnDetails dd:first-child').val();

本文标签： javascripthow to get value of dl tag HTML from jqueryStack Overflow