將錨標記包裹在動態生成的div周圍

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

這不會導致錨標記完全顯示在DOM上。 我在做什么錯，我該如何解決？

編輯：我澄清了哪個div

編輯2：澄清一下，每個鏈接實際上都是動態生成的。 我只是以google.com為例。 因此，影響所有特定類都行不通。

Answer 1

您可以通過選擇.list .boxes元素來單行執行此操作：

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

小提琴的例子

請注意，這僅在使用HTML5的情況下有效，否則在內聯元素（ a ）中包含塊級元素（ div ）將是無效的。

Answer 2

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