使用JQuery创建链接的最佳方法?

时间:2010-11-23 22:34:40

标签: jquery jqgrid

我们使用jqGrid自定义格式化程序在JQuery网格中输出链接。我们只使用字符串操作la:

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

使用JQuery创建链接(和其他表单元素)有更“聪明”的方法吗?

6 个答案:

答案 0 :(得分:99)

我发现最好的

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

实例

我已使用附加处理程序替换了内联javascript

http://www.jsfiddle.net/gaby/RhWgf/

的文档中引用
  

jQuery html 道具

     

html 定义单个字符串的字符串,   独立, HTML 元素(例如<div/>   或<div></div>)    道具 属性,事件和广告的地图   调用新创建的方法   元件。


<强>更新

如果你想要链接的实际文本,你应该将它包装在一个div中并返回它的.html()

或者:您可以使用访问原始元素的.outerHTML属性

jQuery()上的

完整示例删除了点击处理程序,因为它会在字符串版本中丢失,并将其替换为定位的live处理程序特定类型的链接

答案 1 :(得分:15)

正如Steven Xu正确提到的,插入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操作快得多(例如,参见this)。此外,如果您尝试在大型HTML代码中插入DOM片段,则差异会更大。 DOM DocumentFragments的使用可以略微提高性能,但字符串连接的使用是最快的方式。

所有其他答案都是在没有您使用它的上下文(jqGrid自定义格式化程序)的知识的情况下写下了他的答案。我试着解释为什么它对你来说很重要。

由于性能优势,jqGrid首先为网格构建HTML代码片段作为字符串数组,然后根据.join('')从字符串数组构建一个字符串,并将结果插入到表体中只有。 (我想你使用的gridview:true jqGrid选项几乎总是被推荐的。 jqGrid custom formatter是jqGrid在构建网格(表)主体时使用的回调函数。自定义格式化程序必须将HTML代码片段作为结果返回 string 。该字符串将与构建网格主体(表)的其他字符串连接。

因此,如果您将当前代码从纯字符串操作更改为jQuery DOM操作并将结果转换为字符串(需要作为自定义格式的结果返回),那么您的代码将运行缓慢并且您将拥有没有其他优势*。

使用字符串操作的唯一真正缺点是验证您构建的代码的问题。例如,使用没有关闭标记</a>的代码是您可能遇到的潜在问题。在大多数情况下,问题将在插入DOM片段期间得到解决,但有时您可能会遇到实际问题。所以你应该仔细测试你插入的代码。

还有一句话:如果您想关注unobtrusive JavaScript style,可以使用“#”作为href属性的值,并在click内绑定相应的gridComplete事件}或loadComplete事件处理程序。如果您在执行此操作时遇到问题,可以打开一个新问题,我将尝试为您编写相应的代码示例。

注意:我认为最好的实现方式是使用onCellSelectbeforeSelectRow而不是将click事件绑定到列中的每个<a>元素。我建议您阅读以下答案以获取详细信息:this oneanother oneone more old answer

答案 2 :(得分:11)

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

将创建一个jquery对象,然后您可以使用.append将其添加到dom中。

答案 3 :(得分:7)

我的首选方式是:

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

本文中有很好的信息:
http://marcgrabanski.com/articles/building-html-in-jquery-and-javascript

答案 4 :(得分:1)

通常,插入HTML字符串更快,多个DOM注入和DOM操作,这就是jQuery DOM操作的含义。如果你想插入其中的500个,那么性能方面的最佳选择是准备HTML字符串,然后附加HTML。

但为了您的简单目的,您当前的选择将适合您。对于聪明的人,您可以在新元素上使用jQuery的DOM操作库。下面的例子应该是不言自明的,但如果我不清楚某个特定的是,请发表评论,我会帮助你。

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

答案 5 :(得分:0)

这对我有帮助,可以从按钮获取链接以获得新链接

var $jsClonedButtonLinkContainer = $('.js-cloned-button-link-container');
$jsClonedButtonLinkContainer.each(function() {
    $('<a>', {
      href: $(this).find('a.nectar-button').attr('href'),
      'class': 'flip-box__cloned-button-link'
    }).prependTo($(this).find('.flip-box-back'));
  });