将一个 jQuery 对象数组添加到另一个 jQuery 节点

Question

在jQuery 1.3.2版本中，以下内容有效：

$('<span/>').append(
  $([
    $('<span/>').append(
      $('<a>').attr('href', 'http://google.com').text('Google')
    ),
    $('<span/>').text('Foo')
  ])
)

看起来在jQuery 1.4.2中，$([...])会默默失败。因为我们的单元测试需要运行1.3.2版本的jQuery，但主要应用程序使用jQuery 1.4.2，所以我需要使这段代码兼容两个版本。有什么想法吗？

- YourParadigm

---

请查看http://bugs.jquery.com/ticket/8897。 - shesek

Answer 1

尝试使用.get(0)来获取要添加到数组中的实际元素。看起来可以：

试一下：http://jsfiddle.net/TFY22/

（您可以在jsFiddle左侧切换jQuery版本，然后在顶部单击运行。）

var test = $('<span/>').append(
  $([
    $('<span/>').append(
      $('<a>').attr('href', 'http://google.com').text('foo')
    ).get(0),  // Get DOM element
    $('<span/>').text('Google').get(0)// Get DOM element
  ])
);

$('body').append(test);

---

编辑：针对下面的评论，有更简单的方法。

这将一次性创建整个结构。

$('<span><span><a href="http://google.com">foo</a></span><span>Google</span></span>');

如果您有任何动态数据需要包含，可以将其拼接起来，但请注意，如果数据的来源未知，则存在安全风险。

http://jsfiddle.net/TFY22/1/

var text = 'foo';

$('<span><span><a href="http://google.com">' + text + 
                                 '</a></span><span>Google</span></span>');

或者采用更冗长的方法，分别创建每个元素并进行追加：

http://jsfiddle.net/TFY22/2/

var $top = $('<span/>');
var $a = $('<a/>').attr('href','http://google.com').text('foo');

$('<span/>').append($a).appendTo($top);
$('<span/>').text('Google').appendTo($top);

或者将您的.append()调用链接在一起，以给出结构化的外观：

http://jsfiddle.net/TFY22/4/

var test = $('<span/>')
    .append($('<span/>')
            .append($('<a>').attr('href', 'http://google.com').text('foo'))
           )
    .append($('<span/>').text('Google'));

$('body').append(test);​

- user113716

---

它确实能够工作。我只是希望它不要那么难看。 - YourParadigm

@YourParadigm - 嗯，这并不比原来更难看。只是添加了两个.get(0)调用。你一开始采取这种方法有特别的原因吗？相对于更简洁的方法，为什么要这样做？ - user113716

@patrick 你会如何让它变得更清晰？我想要达到“最干净”的效果。 - YourParadigm

@你 - 不，你是对的。如果你发现自己的代码更易读，那么你应该坚持这样做。如果你想让代码更简洁，你可以使用[0]代替.get(0)。http://jsfiddle.net/TFY22/3/ - user113716

我偶然发现了这种方法，因为我讨厌链接附加项。 =/ - YourParadigm