Javascript wrapAll（）仅处理第一个元素？

我使用此脚本包装两个div：

jQuery:

$("#wrapcb").click(function(){
  $('#cboxOverlay, #colorbox').wrapAll('<div class="wrapcolorbox">');
});

<span><a id="wrapcb" href="http://www.example.com/one">First link</a></span>
<span><a id="wrapcb" href="http://www.example.com/two">Second link</a></span>
<span><a id="wrapcb" href="http://www.example.com/three">Third link</a></span>

$(".wrapcb").click(function(){
  $('#cboxOverlay, #colorbox').wrapAll('<div class="wrapcolorbox">');
});

<span><a class="wrapcb" href="http://www.example.com/one">First link</a></span>
<span><a class="wrapcb" href="http://www.example.com/two">Second link</a></span>
<span><a class="wrapcb" href="http://www.example.com/three">Third link</a></span>

$（“#wrapbc”）。单击（函数（）{
$（'#cboxOverlay，#colorbox'）.wrapAll（''）；
});

HTML:

$("#wrapcb").click(function(){
  $('#cboxOverlay, #colorbox').wrapAll('<div class="wrapcolorbox">');
});

<span><a id="wrapcb" href="http://www.example.com/one">First link</a></span>
<span><a id="wrapcb" href="http://www.example.com/two">Second link</a></span>
<span><a id="wrapcb" href="http://www.example.com/three">Third link</a></span>

$(".wrapcb").click(function(){
  $('#cboxOverlay, #colorbox').wrapAll('<div class="wrapcolorbox">');
});

<span><a class="wrapcb" href="http://www.example.com/one">First link</a></span>
<span><a class="wrapcb" href="http://www.example.com/two">Second link</a></span>
<span><a class="wrapcb" href="http://www.example.com/three">Third link</a></span>

奇怪的是，这个脚本只在第一个链接上起作用，其他所有链接都被忽略了

---

知道我做错了什么吗？

那是因为你给了他们相同的ID（在一页上使用相同的ID两次）。将其更改为class或为每个链接提供唯一的ID

下面是一个在链接上使用公共类的示例：

jQuery:

$("#wrapcb").click(function(){
  $('#cboxOverlay, #colorbox').wrapAll('<div class="wrapcolorbox">');
});

<span><a id="wrapcb" href="http://www.example.com/one">First link</a></span>
<span><a id="wrapcb" href="http://www.example.com/two">Second link</a></span>
<span><a id="wrapcb" href="http://www.example.com/three">Third link</a></span>

$(".wrapcb").click(function(){
  $('#cboxOverlay, #colorbox').wrapAll('<div class="wrapcolorbox">');
});

<span><a class="wrapcb" href="http://www.example.com/one">First link</a></span>
<span><a class="wrapcb" href="http://www.example.com/two">Second link</a></span>
<span><a class="wrapcb" href="http://www.example.com/three">Third link</a></span>

$（“.wrapbc”）。单击（函数（）{
$（'#cboxOverlay，#colorbox'）.wrapAll（''）；
});

HTML:

$("#wrapcb").click(function(){
  $('#cboxOverlay, #colorbox').wrapAll('<div class="wrapcolorbox">');
});

<span><a id="wrapcb" href="http://www.example.com/one">First link</a></span>
<span><a id="wrapcb" href="http://www.example.com/two">Second link</a></span>
<span><a id="wrapcb" href="http://www.example.com/three">Third link</a></span>

$(".wrapcb").click(function(){
  $('#cboxOverlay, #colorbox').wrapAll('<div class="wrapcolorbox">');
});

<span><a class="wrapcb" href="http://www.example.com/one">First link</a></span>
<span><a class="wrapcb" href="http://www.example.com/two">Second link</a></span>
<span><a class="wrapcb" href="http://www.example.com/three">Third link</a></span>

---

这是因为您给了他们所有相同的ID（在一个页面上使用相同的ID两次）。将其更改为class或为每个链接提供唯一的ID

下面是一个在链接上使用公共类的示例：

jQuery:

$("#wrapcb").click(function(){
  $('#cboxOverlay, #colorbox').wrapAll('<div class="wrapcolorbox">');
});

<span><a id="wrapcb" href="http://www.example.com/one">First link</a></span>
<span><a id="wrapcb" href="http://www.example.com/two">Second link</a></span>
<span><a id="wrapcb" href="http://www.example.com/three">Third link</a></span>

$(".wrapcb").click(function(){
  $('#cboxOverlay, #colorbox').wrapAll('<div class="wrapcolorbox">');
});

<span><a class="wrapcb" href="http://www.example.com/one">First link</a></span>
<span><a class="wrapcb" href="http://www.example.com/two">Second link</a></span>
<span><a class="wrapcb" href="http://www.example.com/three">Third link</a></span>

$（“.wrapbc”）。单击（函数（）{
$（'#cboxOverlay，#colorbox'）.wrapAll（''）；
});

HTML:

$("#wrapcb").click(function(){
  $('#cboxOverlay, #colorbox').wrapAll('<div class="wrapcolorbox">');
});

<span><a id="wrapcb" href="http://www.example.com/one">First link</a></span>
<span><a id="wrapcb" href="http://www.example.com/two">Second link</a></span>
<span><a id="wrapcb" href="http://www.example.com/three">Third link</a></span>

$(".wrapcb").click(function(){
  $('#cboxOverlay, #colorbox').wrapAll('<div class="wrapcolorbox">');
});

<span><a class="wrapcb" href="http://www.example.com/one">First link</a></span>
<span><a class="wrapcb" href="http://www.example.com/two">Second link</a></span>
<span><a class="wrapcb" href="http://www.example.com/three">Third link</a></span>