Gibt es ein jQuery-Äquivalent von MooTools' Element () Konstruktor?

Question

Ich werde ein Javascript-Reporting-Engine für die eigene Webseite zu starten, und habe einige Prototypen mit MooTools gestartet. Ich mag in der Lage zu tun, Dinge wie diese wirklich:

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;
}

Von dem, was ich gesehen habe, jQuery „adoptieren“ Typ Methoden nur HTML-Strings oder DOM-Elemente nehmen. Gibt es eine jQuery entspricht MooTools' Element ?

---

EDIT:. Die große Sache Ich suche hier ist die programmatische Befestigung meiner Click-Ereignis auf den Link

Answer 1

syntaktisch, kann es schöner sein jQuery zu verwenden, um es zu tun, aber es ist wahrscheinlich effizienter nutzen

  document.createElement('li')

Und die Notwendigkeit zu beseitigen, für auf das Nötigste ein String-Vergleichstest und eine kleinere Token Parse.

flydom können auch Ihr Interesse kitzeln, wenn Sie darauf bestehen, eine Menge dom Knoten zu erzeugen. (Es sollte theoretisch schneller sein, aber habe es nicht getestet)

---

Hinweis: Intern jQuery ( " ") sieht aus wie es effektiv tut dies (stark vereinfacht):

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

So würde man davon ausgehen, „document.createElement“ ist also eine „Anforderung“, und wenn Sie wissen , was Sie wollen aus (dh: nicht einige 3rd-Party-Daten mit $( datahere ) parising), dann würde document.createElement imho nur sein als logisches und mit einem Geschwindigkeitsschub der zahlreichen regexps und langsame String-Manipulationen zu vermeiden.

Zum Vergleich: jQuery(document.createElement('div')) sieht aus wie es das (stark vereinfacht) effektiv funktioniert:

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

Answer 2

Hier ist das gleiche in jQuery. Im Grunde ein neues Element zu erstellen, die Sie gerade in dem HTML setzen Sie wollen.

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