Есть ли jQuery-эквивалент конструктора Element () MooTools?
-
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 " accept " методы типа принимают только строки html или элементы DOM. Есть ли какой-либо jQuery-эквивалент элемента MooTools ? Р> <ч> РЕДАКТИРОВАТЬ: Большая вещь, которую я ищу здесь, это программная привязка моего события клика к ссылке.
Решение
синтаксически, может быть, лучше использовать jQuery для этого, но, вероятно, его использование более эффективно
document.createElement('li')
И устраните необходимость в минимальном тесте сравнения строк и незначительном разборе токена. Р>
flydom также может заинтересовать вас, если вы настаиваете на создании большого количества dom-узлов. (Должно быть быстрее в теории, но не проверял это)
<Ч>Примечание: внутренне jQuery (" < html > < / html > ") выглядит так, как будто это эффективно делает это ( упрощенно): р>
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;
}
)
);
}
}
Поэтому можно предположить, что " document.createElement
" Таким образом, это " требование " и, если вы знаете , что вы хотите получить (то есть: не обрабатываете данные третьих сторон с помощью $( datahere )
), то jQuery(document.createElement('div'))
имхо быть таким же логичным и с повышением скорости, чтобы избежать многочисленных регулярных выражений и медленных манипуляций со строками. Р>
Для сравнения: <=> Похоже, это эффективно делает это (упрощенно):
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;
})
)
;
}