javascript - データ属性による値の追加

Question

次の状況があります。

次のテーブル行に、次のデータ属性nameとvalue:が指定されたテーブルがあります。data-specificationattributename="Basiseenheid"

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

私が好きなのは、データ属性に基づいて値 (KG) を取得し、これを次のように追加することdiv "span.qty unit-result"です。

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

うまくいけば、誰かがこれを行う方法を教えてくれます。

Answer 1

jQuery を使用すると、次のコマンドで KG を取得できます。

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

次に、このコマンドで別の幅に追加します。

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

参照: http://api.jquery.com/append/ http://api.jquery.com/html/

Answer 2

jsFiddle デモ

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

または

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

編集: 2 つの間のjsPerf テスト結果。

.find() は、スペース セレクターよりも約 16 ～ 18% 遅いことがわかりました。

.find() - 1 秒あたり 24,035 操作、18% 遅い

マージ セレクタ - 1 秒あたり 29,501 オペレーション、最速

Answer 3

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'));