MooToolsのElement()コンストラクターに相当するjQueryはありますか?

StackOverflow https://stackoverflow.com/questions/176545

  •  05-07-2019
  •  | 
  •  

質問

私は自分のウェブサイトでJavaScriptレポートエンジンを開始し、MooToolsを使用していくつかのプロトタイプ作成を開始します。私はこのようなことができるのが本当に好きです:

function showLeagues(leagues) {
    var leagueList = $("leagues");
    leagueList.empty();
    for(var i = 0; i<leagues.length; ++i) {
        var listItem = getLeagueListElement(leagues[i]);
        leagueList.adopt(listItem);
    }
}

function getLeagueListElement(league) {
    var listItem = new Element('li');
    var newElement = new Element('a', {
        'html': league.name,
        'href': '?league='+league.key,
        'events': {
                'click': function() { showLeague(league); return false; }
        }
    });
    listItem.adopt(newElement);
    return listItem;
}

私が見たものから、jQueryの<!> quot; adopt <!> quot; typeメソッドは、html文字列またはDOM要素のみを受け取ります。 MooToolsの Element と同等のjQueryはありますか?


編集:ここで探している大きなことは、リンクへのクリックイベントのプログラムによる添付です。

役に立ちましたか?

解決

構文的には、jQueryを使用する方が良いかもしれませんが、おそらくより効率的に使用できます

  document.createElement('li')

また、最低限の文字列比較テストとマイナートークン解析の必要性を排除します。

flydom は、多くのdomノードの生成を主張する場合、関心をくすぐることもあります。 (理論的にはもっと速いはずですが、テストはしていません)


注:内部的に、jQuery(<!> quot; <!> lt; html <!> gt; <!> lt; / html <!> gt; <!> quot;)は、これを効果的に行うように見えます(単純化された):

jQuery(matcher) --> function(matcher)
{
   return jQuery.fn.init(matcher) --> function(matcher)
   {
      return  this.setArray(
        jQuery.makeArray(
           jQuery.clean(matcher) --> function(matcher)
           { 
               div = document.createElement('div');
               div.innerHTML = matcher;
               return div.childNodes;
           }
        )
      );
   }
}

したがって、<!> quot; document.createElement <!> quot;を想定します。したがって、<!> quot; requirement <!> quot;であり、必要なものを知っている(つまり、サードパーティのデータを$( datahere )と比較しない)場合、jQuery(document.createElement('div'))はimhoになります多数の正規表現と遅い文字列操作を回避するために、同様に論理的で速度を上げてください。

比較:<=> 効果的にこれを行うように見えます(簡略化されています):

jQuery(matcher) --> function(matcher)
{
   return jQuery.fn.init(matcher) --> function(matcher)
   {
       this[0] = matcher; 
       this.length = 1; 
       return this; 
   }
}

他のヒント

jQueryでも同じことが言えます。基本的に新しい要素を作成するには、必要なHTMLを入力するだけです。

function showLeagues(leagues) {
    var $leagueList = $("#leagues");
    $leagueList.empty();
    $.each(leagues, function (index, league) {
        $leagueList.append(getLeagueListElement(league));
    });
}

function getLeagueListElement(league) {
    return $('<li></li>')
        .append($('<a></a>')
            .html(league.name)
            .attr('href', '?league=' + league.key)
            .click(function() {
                showLeague(league);
                return false;
            })
        )
    ;
}
ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top