Оберточные якорный тег вокруг динамически генерируемые дивы

Question

У меня есть DIV, который создает несколько элементов внутри него:

<div class="lists"> 
        <?php for($i=0;$i<6;$i++) { ?> 
         <div class="list history[[$i]]" id="history[[$i]]"> 
          <div class="info"> 
           <div class="picture monophoto"> 
            <div class="text">BO</div> 
            <div class="img" style="background-image: url();"></div> 
           </div> 
           <div class="right"> 
            <div class="lineone">John Smith</div> 
            <div class="linetwo">Daily Essentials</div> 
           </div> 
          </div> 
          <div class="boxes"> 
           <div class="left"> 
            <div class="box box1"></div> 
           </div> 
           <div class="right"> 
            <div class="box box2"></div> 
            <div class="box box3"></div> 
           </div> 
          </div> 
          <a class="cbutton whiteonblack">VIEW LIST<!--SEE <span class="owner">JOHN'S</span>--></a> 
         </div> 
        <?php } ?> 
       </div> 

Я пытаюсь обернуть следующий DIV якорной тег так ссылки:

<div class="boxes"> </div> 

Использование JQuery Я пытаюсь обернуть это с помощью JQuery, которая является частью цикла:

     for(var i = 0; i < listLength; i++){ 
          for(var y = 0; y < result.history[i].length; y++){ 
           var history = document.getElementById('history' + i); 
           history.querySelector('.boxes').wrap('<a href="http://google.com"></a>'); 
          } 
         } 

Это не resulti ng в якорной теге, отображающейся вообще на DOM. Что я делаю неправильно и как это исправить?

Edit: я выяснил, который Div

Edit 2: Для того, чтобы уточнить, каждая из ссылок на самом деле будет динамически. Я просто использую google.com в качестве примера. Таким образом, всякий отдельный класс не работает.

Answer 1

querySelector возвращает объект NodeList, wrap() функция JQuery, они не будут работать вместе, попробуйте следующее:

for(var i = 0; i < listLength; i++){ 
    for(var y = 0; y < result.history[i].length; y++){ 
     $('#history' + i).find('.boxes').first().wrap('<a href="http://google.com"></a>'); 
    } 
} 

Answer 2

Вы можете сделать это в одной строке, выбрав .list .boxes элементы:

$('.lists .boxes').wrap('<a href="http://google.com"></a>') 

Example fiddle

Обратите внимание, что это будет работать только если вы используете HTML5, в противном случае он будет недействительным иметь элемент уровня блока (a div) внутри встроенного элемента (a).