sistema - ¿La mejor manera de crear un enlace usando JQuery?

sistema de preguntas y respuestas php mysql

Question

Usamos los formateadores personalizados jqGrid para generar enlaces en nuestras cuadrículas JQuery. Simplemente construimos los enlaces utilizando la manipulación de cadenas a la:

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

¿Hay alguna forma más "inteligente" de crear enlaces (y otros elementos de formulario) utilizando JQuery?

Answer 1

Como Steven Xu mencionó correctamente, insertar cadenas HTML es más rápido que manipular el DOM, por lo que recomiendo crear elementos con manipulación de cadenas en lugar de jQuery.

Solo necesitas cambiar esto:

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

a esto:

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

(cierre la etiqueta <a> con </a> al final de la cadena).

La manipulación de la cadena es mucho más rápida que la manipulación DOM (vea this por ejemplo). Además, la diferencia será mucho mayor si intenta insertar un fragmento DOM en medio de un código HTML grande. El uso de DOM DocumentFragments puede mejorar un poco el rendimiento, pero el uso de la concatenación de cadenas es la forma más rápida.

Todas las demás respuestas escribieron su respuesta sin el conocimiento del contexto (formateador personalizado jqGrid) donde lo usa. Intento explicar por qué es importante en tu caso.

Debido a las ventajas de rendimiento, jqGrid crea fragmentos de código HTML para la cuadrícula como la matriz de cadenas, luego crea una cadena a partir de la cadena de cadenas con respecto a .join('''') e inserta el resultado en el cuerpo de la tabla al final de todo solamente. (Supongo que usa gridview:true jqGrid opción que casi siempre se recomienda). El formateador personalizado jqGrid es una función de devolución de llamada utilizada por jqGrid durante la construcción del cuerpo de la cuadrícula (tabla). El formateador personalizado debe devolver el fragmento de código HTML como la cadena como resultado. La cadena se concatenará con otras cadenas que forman el cuerpo de la cuadrícula (tabla).

Por lo tanto, si cambia el código actual de la manipulación de cadenas puras a la manipulación de DOM de jQuery y convierte los resultados en la cadena (que debe devolverse como resultado del formato personalizado), su código funcionará lentamente y no tendrá otras ventajas. *.

La única desventaja real del uso de las manipulaciones de cadenas es el problema de la verificación del código que construyes. Por ejemplo, el uso de código sin las etiquetas de cierre </a> es un problema potencial que puede tener. En la mayoría de los casos, el problema se resolverá durante la inserción del fragmento DOM, pero a veces puede recibir problemas reales. Así que solo debes probar el código que insertaste con mucho cuidado.

Una observación más: si desea seguir el estilo discreto de JavaScript , puede usar "#" como el valor del atributo href y vincular el evento de click correspondiente dentro del controlador de eventos gridComplete o loadComplete . Si tiene problemas con la implementación de esto, puede abrir una nueva pregunta e intentaré escribir el ejemplo de código correspondiente para usted.

Nota: creo que la mejor forma de implementación será el uso de onCellSelect o beforeSelectRow lugar de vincular el evento click a cada elemento <a> en la columna. Recomiendo leer las siguientes respuestas para obtener más información: esta , otra y una más de las respuestas anteriores .

Answer 2

En general, la inserción de una cadena HTML es más rápida y múltiples inyecciones de DOM y manipulaciones de DOM, que es lo que significa esta manipulación de DOM de jQuery. Si desea insertar 500 de estos, la mejor opción, en cuanto al rendimiento, sería preparar la cadena HTML y luego agregar el HTML.

Pero para sus propósitos simples, su opción actual se adaptará muy bien. Para más inteligente, puede usar la biblioteca de manipulación DOM de jQuery en sus nuevos elementos. El siguiente ejemplo debe explicarse por sí mismo, pero si no lo he expresado con claridad, deje un comentario y le ayudaré.

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

Y luego en tu guión universal:

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

Answer 3

Encuentro lo mejor para ser

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

Ejemplo en vivo en http://www.jsfiddle.net/gaby/RhWgf/

He reemplazado el javascript en línea con un controlador adjunto

Cita de los documentos sobre jQuery()

jQuery ( html , props )

html Una cadena que define un elemento HTML único e independiente (por ejemplo, <div/> o <div></div> ).
props Un mapa de atributos, eventos y métodos para invocar el elemento recién creado.

Actualizar

Si desea el texto real del enlace, debe envolverlo en un div y devolver el .html() .

( alternativamente: puede usar el acceso a la propiedad .outerHTML del elemento en bruto )

Ejemplo completo en http://www.jsfiddle.net/gaby/RhWgf/1/ ( eliminó el controlador de clic, ya que se perdería en una versión de cadena y lo reemplazó con un controlador en live que se enfoca en el tipo específico de enlaces )

Answer 4

Mi forma preferida es esta:

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

Hay buena información en este artículo:
http://marcgrabanski.com/articles/building-html-in-jquery-and-javascript

Answer 5

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

Hará un objeto jQuery y luego puede simplemente agregarlo al .append con .append .