CODEWITHSUNDEEP
jquerydom
sam_33
sam_33

Reputation: 595

DOM navigation through jquery

I am newbee to jquery and have some work assigned to me to complete with jquery at my work. I have HTML DOM as follows

<bl id="delme">
<bt class="abst">Test1:</bt>
<bb>Test1Value</bb>
<bt class="abst">Test2</bt>
<bb>Test2Value</bb>
<bt class="abst">Test3</bt>
<bb>Test3Value</bb>?
<bt class="abst">Test4</bt>
<bb>Test4Value</bb>
<bt class="abst">Test5</bt>
<bb>Test5Value</bb>?
<bt class="abst">Test6</bt>
<bb>Test6Value</bb>
<bt class="abst">Test7</bt>
<bb>Test7Value</bb>
<bt class="abst">Test8</bt>
<bb>Test8Value</bb>?
<bt class="abst">Test9</bt>
<bb>Test9Value</bb>
<bt class="abst">Test10</bt>
<bb>Test10Value</bb>
</bl>

Now i need to use jquery to get get values like

Test1: Test1Value

Test2: Test2Value .....

Test10 : Test10Value

How do i do this?

I cannot query through class since all the class has same name. Is there another option to do so?

Upvotes: 0

Views: 937

Answers (4)

GregL
GregL

Reputation: 38121

You can use the following jQuery to create an array of strings which have the format that you are after.

var valueArray = $('#delme bt').map(function() {
    return $(this).text().replace(/^(.*):$/, '$1') + ': ' + $(this).next('bb').text();
});

Now you can manipulate that array of strings however you like, such as using .join() to create a single string.

EDIT: Explanation of the main line inside the .map() function:

i.e. $(this).text().replace(/^(.*):$/, '$1') + ': ' + $(this).next('bb').text();

This line constructs a concatenated string in the desired format. Let's break down the two tricky components (ignoring the ': '):

  1. $(this).text().replace(/^(.*):$/, '$1'): This gets the text content of the current <bt> element ($(this).text()) in the mapping loop, and then uses a regular expression to strip any : at the end. I did this because in your sample HTML, the first item had text of "Test1:", whilst the others didn't have the colon at the end. By stripping it this way, I ensured consistent output (otherwise, the first string would have been "Test1:: Test1Value").
  2. $(this).next('bb').text(): This just gets the text of the next element after the current <bt> in the DOM that is a <bb> element.

Let me know if that makes more sense. :-)

Upvotes: 1

sreyaNotfilc
sreyaNotfilc

Reputation: 146

I'm not sure if this is the right way to go about this but...

I tend to use multiple classes within my divs. That is I create a class to group the element, and then another class to identify a singular element. You can also simply give it an id.

There are no limits to how many classes you can create. I use classes all over the place as identifiers. Are there other ways of doing this? I'm sure, but this way works just fine.

Actually, I probably write this a bit different.

<div class="abst test1">
 <div class="abstTitle">Test1:</div>
 <div class="abstValue">Test1Value</div>
</div>

var test1Title = $('.test1 > .abstTitle').html();
var test1Value = $('.test1 > .abstVal').html();

idunno...

Upvotes: 0

jfriend00
jfriend00

Reputation: 707326

You can do it like this:

var results = {};
$("#delme bt").each() {
    var self = $(this);
    results[self.text()] = self.next().text();
}
// results object contains bt text as keys, bb text as values
// results["Test1:"] == "Test1Value"

This gets each bt that is inside the #delme object, then extracts the text from it, then gets the next DOM object (which will be the corresponding bb object), then gets the text from that and assigns both back to the results object.

If you wanted the results in an array with alternating bt and bb values instead of an object, that could be done like this:

var results = [];
$("#delme bt").each() {
    var self = $(this);
    results.push(self.text())
    results.push(self.next().text());
}
// results array contains alternating bt and bb values
// results[0] == "Test1:"
// results[1] == "Test1Value"

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

I think, on first thoughts, though this is untested, that the following should work:

var values = {};

$('bt.abst').each(
    function(){
        values[$(this).text()] = $(this).next('bb').text();
    });

JS Fiddle demo, albeit the demo uses real mark up (a dl, with dt and dd elements).

Upvotes: 2

Related Questions