Pytanie Najlepszy sposób na utworzenie łącza za pomocą JQuery?


Używamy niestandardowych formaterów jqGrid do wyświetlania linków w naszych siatkach JQuery. Po prostu tworzymy linki za pomocą manipulacji String a la:

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

Czy istnieje bardziej "sprytny" sposób tworzenia łączy (i innych elementów formularza) za pomocą JQuery?


22
2017-11-23 22:34


pochodzenie




Odpowiedzi:


Jak słusznie wspominał Steven Xu, wstawianie napisów HTML jest szybsze niż manipulowanie DOM, dlatego polecam tworzenie elementów za pomocą ciągów zamiast jQuery.

Musisz tylko to zmienić:

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

do tego:

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

(blisko <a> oznacz tagiem </a> na końcu ciągu).

Manipulacja DOM jest znacznie szybsza niż manipulacja DOM (patrz to na przykład). Co więcej, różnica będzie znacznie większa, jeśli spróbujesz wstawić fragment DOM w środku dużego kodu HTML. Wykorzystanie DOM DocumentFragments może trochę poprawić wydajność, ale użycie konkatenacji łańcuchów jest najszybszą metodą.

Wszystkie inne odpowiedzi napisały odpowiedź bez znajomości kontekstu (jqGrid niestandardowy formatter), w którym go używasz. Próbuję wyjaśnić, dlaczego jest to ważne w twoim przypadku.

Ze względu na zalety wydajności, jqGrid buduje fragmenty kodu HTML dla siatki jako tablicy łańcuchów, a następnie buduje jeden ciąg z tablicy łańcuchów w odniesieniu do .join('') i wstaw wynik do treści tabeli na końcu tylko wszystkich. (Przypuszczam, że używasz gridview: true jqGrid, która prawie zawsze jest zalecana). The jqGrid niestandardowy formater jest funkcją zwrotną używaną przez jqGrid podczas budowania struktury siatki (tabeli). Formater niestandardowy musi zwrócić fragment kodu HTML jako strunowy jako wynik. Łańcuch zostanie połączony z innymi ciągami, które budują bryłę siatki (tabela).

Jeśli więc zmienisz aktualny kod z manipulacji czystymi ciągami na manipulację DOM jQuery i konwertujesz wyniki na ciąg znaków (który musi zostać zwrócony w wyniku niestandardowego formatowania), twój kod będzie działał powoli i nie będziesz miał żadnych innych zalet *.

Jedyną istotną wadą użycia manipulacji łańcuchami jest problem weryfikacji kodu, który budujesz. Na przykład użycie kodu bez tagów zamykających </a> jest potencjalnym problemem, który możesz mieć. W większości przypadków problem zostanie rozwiązany podczas wstawiania fragmentu DOM, ale czasami możesz napotkać prawdziwe problemy. Powinieneś więc po prostu przetestować kod, który wstawiłeś bardzo ostrożnie.

Jeszcze jedna uwaga: jeśli chcesz podążać dyskretny styl JavaScript możesz użyć "#" jako wartości dla href atrybut i powiązaj odpowiednie click wydarzenie wewnątrz gridComplete lub loadComplete obsługa zdarzeń. Jeśli będziesz miał problemy z implementacją tego, możesz otworzyć nowe pytanie, a ja postaram się napisać dla ciebie odpowiedni przykład kodu.

Uwaga: Myślę, że najlepszym sposobem wdrożenia będzie użycie onCellSelect lub beforeSelectRowzamiast wiązania click wydarzenie każdemu <a> element w kolumnie. Zalecam przeczytanie poniższych odpowiedzi w celu uzyskania szczegółów: ten, inny i jeszcze jedna stara odpowiedź.


14
2017-11-24 11:08



"wstawianie ciągu HTML jest szybsze niż DOM" - Oczywiście, jest to również najlepszy sposób, aby zapewnić mnóstwo problemów XSS. - oreoshake
@oreoshake: Przepraszam, ale nie jestem pewien, czy rozumiem cię poprawnie. Pytanie, na które odpowiedziałem, dotyczyło użycia jqGrid niestandardowe formatery. Jest to wywołanie zwrotne używane przez jqGrid do konstruowania zawartości HTML komórek w określonej kolumnie. Więc niestandardowe formatery musieć Zwróć ciąg znaków, ponieważ jest to wymagane przez interfejs jqGrid. Wymaganie istnieje, ponieważ kompilacja jqGrid wszystkie rzędy siatki jako jeden ciąg * i wstaw go jako jedna operacja DOM. Poprawia wydajność. Odpowiedź "Gaby aka G. Petrioli" nie ma związku z tym pytaniem, ponieważ nie można go używać z jqGrid. - Oleg


Uważam, że najlepiej być

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

Przykład na żywo w http://www.jsfiddle.net/gaby/RhWgf/

Zastąpiłem wbudowany javascript załączonym programem obsługi

Cytuj z dokumentów na temat jQuery ()

jQuery( html, rekwizyty )

html Ciąg określający singiel,   samodzielny, HTML element (np. <div/>   lub <div></div>).
rekwizyty Mapa atrybutów, zdarzeń i   metody wywoływania nowo utworzonego   element.


Aktualizacja

Jeśli chcesz faktyczny tekst łącza, powinieneś zawinąć go w div i zwrócić .html() tego.

(alternatywnie: możesz użyć dostępu do .outerHTML własność surowca)

Pełny przykład w http://www.jsfiddle.net/gaby/RhWgf/1/ (usunął moduł obsługi kliknięć, ponieważ zagubiłby się w wersji łańcuchowej i zastąpił go znakiem a live program obsługi, który działa na określony rodzaj łączy)


93
2017-11-23 22:58





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

Wykona obiekt jquery i możesz go po prostu dodać do domeny z .append.


11
2017-11-23 22:37



Czy istnieje sposób, aby po prostu zwrócić surowy HTML? Coś jak jQuery('<a>').attr('href', 'url').text('blah').html()? - Marcus Leon
Jedynym sposobem, w jaki mogłem to zrobić, było dołączenie tego do innego elementu div i pobranie jego html. lubić: jQuery('<div>').append(jQuery('<a>').attr('href', 'url').text('blah')).html().html dostanie tylko to, co jest w środku bieżącego elementu, więc musiałem zawinąć to w coś innego. Ale TBH, to, co masz w swoim pytaniu, jest w porządku. Użyłem jQGrid wcześniej i tak to zrobiłem. - shoebox639


Mój preferowany sposób to:

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

W tym artykule są dobre informacje:
http://marcgrabanski.com/articles/building-html-in-jquery-and-javascript


6
2017-11-23 22:39



"a" naprawdę powinno być "<a>" albo nie zadziała ... - Gabriele Petrioli
dobry telefon, wychodziłem z tego artykułu, ale zawsze zapominam, że rzeczywiście potrzebujesz nawiasów. - TJB


Ogólnie, wstawianie ciągu HTML jest szybsze i wielokrotne zastrzyki DOM i manipulacje DOM, co jest tym, czym jest ta manipulacja DOMem jQuery. Jeśli chcesz wstawić 500 z nich, najlepszą opcją pod względem wydajności byłoby przygotowanie łańcucha HTML, a następnie dołączenie kodu HTML.

Ale dla twoich prostych celów, bieżąca opcja będzie ci pasować. Dla sprytniejszego możesz użyć biblioteki manipulacji DOM jQuery w swoich nowych elementach. Poniższy przykład powinien być oczywisty, ale jeśli nie miałem jasności w konkretnym przypadku, zostaw komentarz, a ja ci pomogę.

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 następnie w swoim uniwersalnym scenariuszu:

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

1
2017-11-23 22:43