3

データ属性を持つ要素がたくさんあります。

<span data-product_attribute="title" data-product_id="12">product title</span>
<span data-product_attribute="vendor" data-product_id="12">product vendor</span>

そして、私はjQueryセレクターを使用してそれらを取得し、処理のためにリストに入れています。

$('span[data-product_attribute]').map(function() {
    var o = {};
    o.name = $(this).attr("data-product_attribute");
    o.value = $(this).html(); // ** this line is not what I want **
    return o;
}).get()

このメソッドはタグhtml()内に含まれているものだけを返しますが、私が欲しいのはすべてです。<span>つまり、私はこれを実行しようとしています：

o.value = '<span data-product_attribute="title" data-product_id="12">product title</span>'

で表されるすべてを返すjQueryメソッドはあり$(this)ますか？

4

4 に答える 4

2

要素の「outerhtml」が必要です。一部のブラウザは、.outerHTMLプロパティを介してこれを提供できます。

それが失敗した場合、関連する質問への私の答えには、これのための簡単なプラグインがあります：

(function($) {
    $.fn.outerhtml = function() {
        return $('<div/>').append(this.clone()).html();
    };
})(jQuery);
于 2013-02-25T14:00:19.453 に答える
1

HTMLの例：

 <div id="testing">
    <span data-product_attribute="title" data-product_id="12">product title</span>
    <span data-product_attribute="vendor" data-product_id="12">product vendor</span>
 </div>

Javascript：

 function getHtml(elem) {
     var tmp = $('<div />');
     tmp.append(elem);
     return $(tmp).html();
 }    

 $('span[data-product_attribute]').map(function() {
     var o = {};
     o.name = $(this).attr("data-product_attribute");
     o.value = getHtml($(this));
     alert(o.value);
     return o;
 }).get()
于 2013-02-25T14:07:33.037 に答える
0

これは、JavaScriptを介して非常に簡単に行うことができます。

$(this).get(0).outerHTML;

必要に応じて、このプラグインを使用できます。

$.fn.outerHTML = function(){
    return (!this.length) ? this : (this[0].outerHTML || (
      function(el){
          var div = document.createElement('div');
          div.appendChild(el.cloneNode(true));
          var contents = div.innerHTML;
          div = null;
          return contents;
    })(this[0]));
}
于 2013-02-25T13:58:47.773 に答える
0

これを使って...

$('#mydiv').on('click', function(){
    console.log(this.outerHTML);
});

この例を参照してください

于 2013-02-25T14:16:49.770 に答える