3

与えられたタグについては、かなりの数の要素でラップする必要があります。ユーザーが置くことができるように

<img src="img.gif" >

しかし、結果は

<div class="total">
    <div class="cover">
        <div class="crop">
            <img src="img.gif" alt> 
        </div>
        <div class="hover">
            <div class="peel">
                <div class="links">
                    <a href="#">FB</a>
                </div>

            </div>
        </div>
    </div>
</div>

そこで、jQueryプラグインにすることにしました。そしてここにその一部があります

(function($) {
$.fn.peel = function(options) {
    var defaults = {};
    var settings = $.extend({},defaults, options);

    return this.each(function() {
        $(this).load(function() {
            var image = $(this);
            var total = $('<div />', {'class' : 'total'});
            var cover = $('<div />', {'class' : 'cover'});
            var crop = $('<div />', {'class': 'crop'});
            var hover = $('<div />', {'class' : 'hover'});
            var peel = $('<div />', {'class' : 'peel'});
            var links = $('<div />', {'class' : 'links'});
            var a = $('<a>', {'href' : '#', 'text' : 'FB'});
            //Chaining begins here
            image.wrap(crop);
            crop.after(hover);

        });
    });

};
})(jQuery);

最初に、使用するdivを使用して変数を作成します。でも今回は全部まとめるのに苦労しました。チェーンで動かしたくない2行を残しました。最初は画像を切り抜きでラップし、次に切り抜きdivの後にホバーdivを追加します。しかし...2行目は機能しません。私はいろいろな方法で試しました。今のところ運がない。「ラップ」で追加されたものを追加することは不可能のようです。多分私は間違っているので、多分あなたの誰かが助けることができますか？:)

ありがとう。

4

3 に答える 3

2

ページに挿入されていない要素に対するDOM操作は、少し注意が必要な場合があります。

afterたとえば、親を持つ要素でのみ機能します。これがその実装です：

after: function() {
    return this.domManip( arguments, false, function( elem ) {
        if ( this.parentNode ) {
            this.parentNode.insertBefore( elem, this.nextSibling );
        }
    });
},

同様に、対称的な実装を持つwhichwrapを呼び出します。before

appendうまくいくのは、最も外部の要素を使用して開始することによってツリーを構築することです。

cover.append(crop);
crop.append(image);
cover.append(hover);
于 2013-02-06T13:42:25.697 に答える
1

あなたはこの方法でそれを達成することができます：

image.wrap(total).wrap(cover).wrap(crop)
    .closest('.crop')
    .after(a.wrap(hover).wrap(peel).wrap(links).closest('.hover'));

@dystroyの答えは完全には正しくありません：メモリ内のノードの後に​​物を挿入できます

cover.append(crop).append(hover).appendTo('body');

3つのノードすべてがDOMに追加されていることがわかります

重要なポイントは$.wrapです。他の操作とは異なり、何かをラップすると、jQueryは新しいコピーを作成します。このとき、domのラッパーは、メモリで作成されたラッパーと同じ参照ではなくなります。

例として最初の行を取り上げます。

var domCrop = image.wrap(total).wrap(cover).wrap(crop)
    .closest('.crop');
console.log(domCrop.is(crop)); //false, domCrop and the corp in mem not point to the same ref

最後になりましたが、実際には、この方法でdomノードを拡張するのは好きではありません。コードの記述と保守が困難になりました。

これが私の解決策です：

(function($) {
$.fn.peel = function(options) {
    var defaults = {};
    var settings = $.extend({},defaults, options);
    var html = '<div class="total">'
        + ' <div class="cover">'
        + '   <div class="crop"></div>'
        + '   <div class="hover">'
        + '      <div class="peel">'
        + '         <div class="links">'
        + '            <a href="#">FB</a>'
        + '         </div>'
        + '      </div>'
        + '   </div>'
        + ' </div>'
        + '</div>';

    return this.each(function() {
        $(this).load(function() {
            var $image = $(this);

            //introduced a placeholder. 
            //not to replace the $image directly, just for keeping all the event handler bound to $image.
            var $placeholder = $('<span/>').insertAfter($image);
            $(html).find('.crop').append($image)
                .end()
                .replaceAll($placeholder);
        });
    });

};
})(jQuery);

jsFiddleデモ：http ：//jsfiddle.net/vF4QH/1/

于 2013-02-06T14:07:05.730 に答える
0

このように一度だけテンパルトを作ってみませんか

var htmlTemplate = '<div class="total">'
    htmlTemplate += ' <div class="cover">';
    htmlTemplate += '   <div class="crop"></div>';
    htmlTemplate += '   <div class="hover">';
    htmlTemplate += '      <div class="peel">';
    htmlTemplate += '         <div class="links">';
    htmlTemplate += '            <a href="#">FB</a>';
    htmlTemplate += '         </div>';
    htmlTemplate += '      </div>';
    htmlTemplate += '   </div>';
    htmlTemplate += ' </div>';
    htmlTemplate += '</div>';

次に、必要に応じて、次のコードのような操作を実行して、画像タグを挿入できます。

var selection = $(htmlTemplate);
selection.find('.crop').html('<img src="img.gif" alt>');

そして最後にそれをDOMのどこかに追加します

//substitute body for where you wish to place the result
$("body").append(selection)
于 2013-02-06T14:12:23.870 に答える