Append value by data attribute

Question

I've got the following situation:

There is a table provided with the following data attribute name and value: data-specificationattributename="Basiseenheid" in the following table row:

<tr class="even" data-specificationattributename="Basiseenheid">
    <td class="a-left spec-namehide">
        Basiseenheid
    </td>     
    <td class="a-left spec-valuehide">
        KG 
    </td>   
</tr>

What I like is get the value (KG) on the basis of the data attribute and append this to the following div "span.qty unit-result":

<div class="qty-unit">
    <span class="qty-unit-result"></span>
</div>

Hopefully someone can show me how to do this.

did you mean to get 'KG' when 'Basiseenheid' is passed to you that is present inside first td? — niksvp, Oct 10 '13 at 14:20

Venkata Krishna · Answer 1 · 2013-10-10T15:02:32.457

2

jsFiddle DEMO

var selector = $('[data-specificationattributename=Basiseenheid]');
var kgVal = selector.find('.spec-valuehide').text().trim();
$('.qty-unit-result').html(kgVal);

Or

var selector = $('[data-specificationattributename=Basiseenheid] .spec-valuehide');
var kgVal = selector.text().trim();
$('.qty-unit-result').html(kgVal);

EDIT: jsPerf Test results between the two of them.

Turns out .find() is around 16-18% slower than the space selector.

.find() - 24,035 Operations per second, 18% slower

merge selector - 29,501 Operations per second, fastest enter image description here

edited Oct 10 '13 at 15:02

answered Oct 10 '13 at 14:19

Venkata Krishna

14,926
5
42
56

You can merge your initial selector and .find() into one selector, given that your searching in the same direction. – Prusprus Oct 10 '13 at 14:23
@Prusprus - `find` tends to be faster than multi-level selectors. – talemyn Oct 10 '13 at 14:26
AFAIK, one large selector gets pushed to javascript's querySelectorAll, while chaining breaks the selector into multiple functions. So for modern browsers, jquery will push the selector directly to js. – Prusprus Oct 10 '13 at 14:29
1

@guys - thanks for the comments .. I added both, Peace :) – Venkata Krishna Oct 10 '13 at 14:34
1

@BlueBay - glad to help. please upvote all helpful answers & accept one of them. – Venkata Krishna Oct 10 '13 at 14:37
@Prusprus - any performance test that I have ever seen has rated `$("SELECTOR_1").find("SELECTOR_2");` faster than `$("SELECTOR_1 SELECTOR_2");` – talemyn Oct 10 '13 at 14:43
1

@Prusprus and talemyn - the performance topic caught me interesting. I did some jsperf test on them. Turns out Prusprus way is faster. – Venkata Krishna Oct 10 '13 at 15:03
1

@BlueBay you might want to accept this answer. Krishna, thanks for the metrics. Not to discredit talemnyn, do you have your metrics to compare? – Prusprus Oct 10 '13 at 15:33
@Prusprus and Krishna - this jsperf test compares a 7 different selection approaches: http://jsperf.com/jquery-selectors-context/2 (from the last answer in this thread: http://stackoverflow.com/questions/648004/what-is-fastest-children-or-find-in-jquery). In over 1000 runs, across different browsers, only a subset of Opera browsers shows significant speed using only a selector. The `find()` approach is rarely beaten by anything but `children()`, which, of course, is only usable for immediate child selections. Admittedly, a "selector + `find`" is not as fast as "context + `find`". – talemyn Oct 10 '13 at 16:28
2

That's amazing, I would have never guess. Good job @talemyn. What I take away from this: 1) Performance is relative to its scenario/environment 2) Context, Context, Context: Can't hurt. – Prusprus Oct 10 '13 at 16:51
Before I saw that, I had a hard time believing it too. :) Even before seeing it, though, when I would run an occasional performance test just to check, `find` kept winning out. I think for me I assumed that because it looks more efficient, it should preform more efficiently too. :D – talemyn Oct 10 '13 at 17:17

score 2 · Answer 2 · edited Oct 10 '13 at 14:41

2

With jQuery you can get the KG with this command :

var fst= $( ".spec-valuehide" ).html();

Then append it into another width this command:

$( ".qty-unit-result" ).append(fst);

see : http://api.jquery.com/append/ http://api.jquery.com/html/

edited Oct 10 '13 at 14:41

Prusprus

7,987
9
42
57

answered Oct 10 '13 at 14:29

Morteza Soltanabadiyan

650
3
15

2

but thats not what OP wanted though. He wants the value where there is a specific data attribute to the row. – Venkata Krishna Oct 10 '13 at 14:35
yes, ur right , misunderstand . – Morteza Soltanabadiyan Oct 10 '13 at 14:44

score 1 · Answer 3 · answered Oct 10 '13 at 14:22

1

find_value($key){
    return $('table tr[data-specificationattributename='+$key+'] td.spec-value-hide').html().trim();
}

$('div.qty-unit span.qty-unit-result').html(find_value('Basiseenheid'));

answered Oct 10 '13 at 14:22

Prusprus

7,987
9
42
57

Append value by data attribute

3 Answers3