Question

我想使用jQuery动态扩展我的标记，以便我的div显示为漂亮的圆角框。

例如，如果我的DOM有一系列具有唯一ID的div对象，例如：

<div id="queuediv0" class="isequeue" > </div>

可以使用以下方式选择：

$(“.isequeue”)

我想替换/包装这些div，以便最终结果如下：

<div class="isequeue_wrapper">
    <div class="isequeue_wrapper_oc">
        <div class="isequeue_wrapper_dk" style="margin: 0 5px;"> </div>
        <div class="isequeue_wrapper_dk" style="margin: 0 3px;"> </div>
        <div class="isequeue_wrapper_dk" style="margin: 0 2px;"> </div>
        <div class="isequeue_wrapper_dk" style="margin: 0 1px;"> </div>
   </div>
    <p class="isequeue_header">
        Header text
    </p>
    <div class="isequeue_wrapper_ic">
        <div class="isequeue_wrapper_lt" style="margin: 0 5px;"> </div>
        <div class="isequeue_wrapper_lt" style="margin: 0 3px;"> </div>
        <div class="isequeue_wrapper_lt" style="margin: 0 2px;"> </div>
        <div class="isequeue_wrapper_lt" style="margin: 0 1px;"> </div>
    </div>
    <div id="queuediv0" class="isequeue" >
    </div>
     <div class="isequeue_wrapper_oc">
         <div class="isequeue_wrapper_dk" style="margin: 0 1px;"> </div>
         <div class="isequeue_wrapper_dk" style="margin: 0 2px;"> </div>
         <div class="isequeue_wrapper_dk" style="margin: 0 3px;"> </div>
         <div class="isequeue_wrapper_dk" style="margin: 0 5px;"> </div>
     </div>
</div>

附加标记可以动态添加，也可以隐藏在原始页面中，以便可以选择和复制。

我确信有一种干净的方法可以实现这一目标，但现在它已经让我失望了。 jQuery.wrap（）会将所选对象放入提供的源的最里面部分，但是当您希望所选项目成为新添加源的兄弟时，如何实现此目的。

谢谢，吉姆

Answer 1

这样的事情可行：

$(function() {
    var $isqueue = $('.isequeue');
    $isqueue.wrap('<div class="isequeue_wrapper"></div>');
    $isqueue.before(/* All the isequeue_wrapper_oc, isequeue_header, isequeue_wrapper_ic and  stuff */).after(/* All the isequeue_wrapper_ic stuff */);
});

将所有的东西预先制作然后只是克隆它是明智的。但是，您也可以将它们作为字符串并以相同的方式插入。

Answer 2

before（）和after（）应该有效。

在jQuery中用兄弟姐妹包装div的最简单方法是什么？

2 个答案: