I want to select the following three values from the HTML file either by Jquery or Javascript.

1. class "class1" href value
2. class "class1" inner text value (PersonA in the example code)
3. class "Title" inner text value (Accountant in the example)

How can I select all the data of li node by node as? I am lost :(

<ol id="result-set">
<li id="v-0">
    <div class="result-data">
    ..
    <h2>
        <a class="class1" href="">PersonA</a>
    </h2>
    <dl class="basic">
        <dt>Title</dt>
        <dd class="title">Accountant</dd>
        ....
    </dl>
    </div>
</li>
<li id="v-1">
...
</li>
..... 

I want to select the following three values from the HTML file either by Jquery or Javascript.

1. class "class1" href value
2. class "class1" inner text value (PersonA in the example code)
3. class "Title" inner text value (Accountant in the example)

How can I select all the data of li node by node as? I am lost :(

<ol id="result-set">
<li id="v-0">
    <div class="result-data">
    ..
    <h2>
        <a class="class1" href="">PersonA</a>
    </h2>
    <dl class="basic">
        <dt>Title</dt>
        <dd class="title">Accountant</dd>
        ....
    </dl>
    </div>
</li>
<li id="v-1">
...
</li>
..... 

• javascript
• jquery
• html
• jquery-selectors

• What do you mean by "select"? Highlight? – Bergi Commented Jul 10, 2012 at 7:27
• Could you reformulate the question please? Sorry, but I think I don't get it – davids Commented Jul 10, 2012 at 7:29
• 1 Where in your HTML is classA? I only see class1. You can get "Accountant" via several ways, a safe approach would be to be specific in using selectors. One approach is this: $('#result-set li#v-0 dl.basic dd.title').html() – Dexter Huinda Commented Jul 10, 2012 at 7:29
• 1 So I read his Q again, he mentioned "li node by node", so he does need to loop and nnnnnn's answer did the trick. – Dexter Huinda Commented Jul 10, 2012 at 7:40

4 Answers 4

To get "PersonA": $('#v-0 h2 a').html();

To get href of that link: $('#v-0 h2 a').attr('href');

To get "Accountant": $('#v-0 dl dd').html();

You can modify the id ("v-0") at the start of the selector to choose a particular "row" of your data set.

With jQuery, you can do something like this:

$("#result-set li").each(function() {
   var $currentLi = $(this),
       $class1link = $currentLi.find("a.class1"),
       class1href = $classAlink.attr("href"),
       class1content = $classAlink.html();

   // do something with values
});

The .each() method will process each li element. Within the callback to .each() the variable $currentLi is a jQuery object holding that li (set from $(this) where this is the li element itself). The .find() method is used to find the anchor element within the li and then its href and content are retrieved.

The "Accountant" you asked about is one item in a definition list, so you'd probably want to loop through that list with another .each() statement nested inside the one above.

You don't make it clear how you want to use the values, but this should get you started. For further details about the various jQuery methods I've mentioned check the jQuery API.

document.getElementById(Id).value

returns value of element with specific id. in jquery:

$("#id").val()

by class $(".yourClass").val()

to get attribute value use attr("attributeName") for example $(".class1").attr('href').

if you want to get text from specified element use .text() like $(".title").text() //will return Accountant.

You mean selecting them with a jQuery selector? That would be done like so:

$('.class1').attr('href') //class1 href, i persume you dont mean classA as it doesnt exist in your code
$('.class1').text(); //PersonA text using the same selector
$('.title').text(); //Accountant from the .title dd