将锚标记包裹在动态生成的div周围

Question

I have a div that generates multiple elements inside it:

 <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>

I am trying to wrap the following div with an anchor tag so it links:

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

Using jQuery I am trying to wrap this using jQuery that is part of a loop:

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

This is not resulting in an anchor tag showing up at all on the DOM. What am I doing wrong and how do I fix it?

Edit: I clarified which div

Edit 2: To clarify, each of the links are actually going to be dynamically generated. I am just using google.com as an example. So effecting all of a specific class wont work.

Answer 1

You can do this in a single line by selecting the .list .boxes elements:

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

Example fiddle

Note that this will only work if you are using HTML5, otherwise it would be invalid to have a block level element (a div ) inside an inline element (the a ).

Answer 2

querySelector returns a NodeList object, wrap() is a jquery function, they won't work together, try this :

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