CODEWITHSUNDEEP
jqueryjquery-selectors
Sam
Sam

Reputation: 1511

jQuery Selectors

I need a bit of help getting the values from these HTML elements with jQuery;

<ul class='post-meta'>
<li><span class='post-meta-key'>uniqueidA:</span> value1</li>
<li><span class='post-meta-key'>uniqueidB:</span> value2</li>
</ul>

These are dynamic values and I need to say get 'value1' from 'uniqueidA' and 'value2' from 'uniqueidB'

Upvotes: 2

Views: 199

Answers (5)

Hussein
Hussein

Reputation: 42808

To get the uniqueid and value, we need to grab both the text() and nodeType values.

var x = $('.post-meta-key');
var y = $('li').contents().filter(function() {
    return this.nodeType == 3
});
alert(x.eq(0).text() + " " + y.eq(0).text()); //This will get you only the first `<li>`

To get the value of all <li>'s we need to create a for loop. See working example below.

Check working example at http://jsfiddle.net/3CcjF/1/

Upvotes: 0

Šime Vidas
Šime Vidas

Reputation: 185883

A definition list would better suit your requirements:

<dl class='post-meta'>
    <dt>uniqueidA</dt> <dd>value1</dd>
    <dt>uniqueidA</dt> <dd>value2</dd>
</dl>

... then just use next() to jump to the value.

Upvotes: 0

Flavio CF Oliveira
Flavio CF Oliveira

Reputation: 5285

well, why dont put the value text inside a tag with a specific id? could it be an option for you?

<ul class='post-meta'>
    <li><span class='post-meta-key'>uniqueidA:</span><span id="uniqueidA">value1</span></li>
    <li><span class='post-meta-key'>uniqueidB:</span><span id="uniqueidB">value2</span></li>
</ul>

does it solve your problem?

Upvotes: 0

jessegavin
jessegavin

Reputation: 75640

var a = $(".post-meta-key:contains('uniqueidA')").get(0).nextSibling.nodeValue;
var b = $(".post-meta-key:contains('uniqueidB')").get(0).nextSibling.nodeValue;

alert(a +" "+ b);

See it on jSFiddle: http://jsfiddle.net/jay2S/

If you need the values without any whitespace you can use jQuery.trim()

alert($.trim(a) +" "+ $.trim(b));

There may be more factors in your particular situation, but this is a quick and dirty way to get it done.

Upvotes: 5

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

Selectors won't help much here.

You will have to select the parent: $('.post-meta-key:contains('uniqueidA'))

Then you will have to write your own javascript to parse the contents. Or you can copy the parent to a temporary object, then .remove() the span, leaving you with a space and your value.

As Šime Vidas suggests, re-write your HTML so a selector will work directly.

Upvotes: 0

Related Questions