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

时间:2015-12-16 16:45:32

标签: javascript jquery html

我有一个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为例。因此影响所有特定课程都不会有效。

2 个答案:

答案 0 :(得分:1)

您可以通过选择.list .boxes元素在一行中执行此操作:

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

Example fiddle

请注意,这仅适用于使用HTML5的情况,否则在内联元素(div)中包含块级元素(a)将无效。

答案 1 :(得分:1)

wrap()返回一个NodeList对象,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>'); } } 是一个jquery函数,它们不能一起工作,试试这个:

Sql Server 2012+