Лучший способ создать ссылку с помощью JQuery?

Question

Мы используем пользовательские форматеры jqGrid для вывода ссылок в наших сетках JQuery. Мы просто создаем ссылки, используя манипуляции со строками а-ля:

var s = "<a title=\"Blah\" href=\"javascript:BlahFunc('" + options.rowId + "')\">This is blah<a>";

Есть ли более "умный" способ создания ссылок (и других элементов формы) с использованием JQuery?

Answer 1

Я считаю лучшим быть

$('<a>',{
    text: 'This is blah',
    title: 'Blah',
    href: '#',
    click: function(){ BlahFunc( options.rowId );return false;}
}).appendTo('body');

Живой пример в http://www.jsfiddle.net/gaby/RhWgf/

Я заменил встроенный JavaScript на прикрепленный обработчик

Цитата из документации о jQuery ()

jQuery ( html , реквизит )

html Строка, определяющая один, автономный элемент HTML (например, <div/> или <div></div>).
реквизит Карта атрибутов, событий и методы для вызова только что созданного элемент.

---

Обновление

Если вам нужен фактический текст ссылки, вы должны заключить его в div и вернуть .html() этого.

( альтернативно: вы можете использовать доступ к свойству .outerHTML необработанного элемента )

Полный пример в http://www.jsfiddle.net/gaby/RhWgf/1/ ( удалил обработчик щелчка, так как он потерян в строковой версии, и заменил его обработчиком live, предназначенным для конкретного виды ссылок )

Answer 2

Как правильно заметил Стивен Сюй, вставка HTML-строк быстрее, чем манипулирование DOM, поэтому я рекомендую создавать элементы с манипулированием строками вместо jQuery.

Вам нужно только изменить это:

var s = "<a title=\"Blah\" href=\"javascript:BlahFunc('" + options.rowId +
        "')\">This is blah<a>";

к этому:

var s = "<a title=\"Blah\" href=\"javascript:BlahFunc('" + options.rowId +
        "')\">This is blah</a>";

(закрыть <a> тег с </a> в конце строки).

Работа со строками выполняется намного быстрее, чемDOM Manipulation (см., Например, this ).Более того, разница будет намного больше, если вы попытаетесь вставить фрагмент DOM в середине большого HTML-кода.Использование DOM DocumentFragments может немного улучшить производительность, но использование конкатенации строк - самый быстрый способ.

Все остальные ответы написали свой ответ без знания контекста (jqGridпользовательский форматер), где вы его используете.Я пытаюсь объяснить, почему это важно в вашем случае.

Из-за преимуществ в производительности jqGrid строит фрагменты HTML-кода для сетки сначала как массив строк, а затем строит одну строку из массива строк относительно .join('') и вставьте результат в тело таблицы только в конце всего.(Я предполагаю, что вы используете gridview: true jqGrid, который почти всегда рекомендуется).Пользовательский форматер jqGrid - это функция обратного вызова, используемая jqGrid при построении тела таблицы (таблицы).Пользовательский форматировщик должен возвращать фрагмент кода HTML в виде строки в качестве результата.Строка будет объединена с другими строками, которые строят тело сетки (таблица).

Так что если вы измените свой текущий код с манипулирования чистой строкой на манипулирование DOM jQuery и преобразование результатов в строку (который необходимо вернуть как результат пользовательского форматирования), тогда ваш код будет работать медленно, и у вас не будет других преимуществ *.

Единственный реальный недостаток использования строковых манипуляций - это проблема проверкикода, который вы строите.Например, использование кода без закрывающих тегов </a> является потенциальной проблемой, которая может возникнуть.В большинстве случаев проблема будет решена во время вставки фрагмента DOM, но иногда вы можете получить реальные проблемы.Поэтому вам нужно просто очень тщательно протестировать код, который вы вставили.

Еще одно замечание: если вы хотите следовать ненавязчивому стилю JavaScript , вы можете использовать "#" в качестве значения для href атрибут и связать соответствующее click событие внутри обработчика событий gridComplete или loadComplete.Если у вас возникнут проблемы с реализацией этого, вы можете открыть новый вопрос, и я постараюсь написать соответствующий пример кода для вас.

Примечание: я думаю, что лучшим способом реализации будет использование onCellSelect или beforeSelectRow вместо привязки события click к каждому элементу <a> в столбце.Я рекомендую прочитать следующие ответы для деталей: этот , другой и еще один старый ответ .

Answer 3

jQuery('<a>').attr('href', 'url').text('blah')

создаст объект jquery, а затем вы можете просто добавить его в dom с помощью .append.

Answer 4

Мой предпочтительный способ такой:

$("<a>", {
  title: "Blah",
  href: "javascript:BlahFunc('" + options.rowId + "')"
  }).append( "This is blah" );

В этой статье есть хорошая информация:
http://marcgrabanski.com/articles/building-html-in-jquery-and-javascript

Answer 5

Как правило, вставка HTML-строки выполняется быстрее и требует многократных DOM-инъекций и DOM-манипуляций, что и составляет эта JQuery DOM-манипуляция.Если вы хотите вставить 500 из них, лучшим вариантом с точки зрения производительности будет подготовка строки HTML, а затем добавление HTML.

Но для ваших простых целей вам подойдет текущий вариант.,Для более умных, вы можете использовать библиотеку манипулирования DOM jQuery на ваших новых элементах.Приведенный ниже пример не требует пояснений, но если я не совсем ясно определился, оставьте комментарий, и я помогу вам.

var toBeAdded = [
  { title: "one", row: 1, content: "ONE" },
  { title: "two", row: 2, content: "TWO" },
  { title: "three", row: 3, content: "THREE" }
];

var s = toBeAdded.length;
for(i=0;i<s;i++) {
  var a = $('<a>');
  a.attr('title', toBeAdded[i].title);
  a.attr('rel', toBeAdded[i].row);
  a.text(toBeAdded[i].content);
  a.addClass('blah_class');
  a.appendTo($('body'));
}

А затем в вашем универсальном сценарии:

$('a.blah_class').live('click', function(){
  var rel = $(this).attr('rel');
  BlahFunc(rel);
});