Question

我很确定这并不像我希望的那么容易，但需要确认。

我想用结束div，图像和重新打开的div替换图像。

以下是一个例子：

在一天结束时，我想采用看起来像这样的HTML：

<div class="post">
    <div class="constrained">
        <p>Hello hello</p>
        <img src="http://www.nicenicejpg.com/400/100">
        <p>Some more text</p>
    </div>
</div>

并使它看起来像这样：

<div class="post">
    <div class="constrained">
        <p>Hello hello</p>
    </div>

    <img src="http://www.nicenicejpg.com/400/100">

    <div class="constrained">
      <p>Some more text</p>
    </div>
</div>

我是否需要升级并与其父母一起工作？

Answer 1

尝试：

$('.constrained p').wrap('<div class="constrained" />').parent().unwrap();

<强> jsFiddle example

产品：

<div class="post">
        <div class="constrained"><p>Hello hello</p></div>
        <img src="http://www.nicenicejpg.com/400/100">
        <div class="constrained"><p>Some more text</p></div>
</div>

Answer 2

http://jsfiddle.net/billymoon/fdCu5/4/

// get reference to the image
var img = $('img')
// get reference to the parent object
var parent = img.parent()
// clone and store parent (should have all same classes and attributes etc...)
var dolly = parent.clone()
// empty the clone
dolly.html("")
// move everything after the image into the clone
dolly.append(img.nextAll("*"))
// put the clone after the parent
parent.after(dolly)
// put the image after the parent (before the clone)
parent.after(img)

在移动它们时保持对象的优势，而不是仅仅复制为HTML，即使事件被移动，事件也应该保持绑定到对象。

此方法不依赖于外部容器类/属性等的先验知识......

Answer 3

只是添加另一个选项，这里是Billy Moon和j08691答案的合并解决方案。您可以根据需要修改变量以选择要包装的子项 - 或者您可以对其进行硬编码以压缩代码。

var containerClass = '.constrained';
var childrenToWrap = '.constrained > *:not(img)';

var container = $(containerClass).clone().empty();
$(childrenToWrap).unwrap().wrap(container);

Answer 4

我找到了一个非常灵活的解决方案：

  /*
    Wide Images
  */
  $('img.size-wide').each(function(i,el){
    // cache the element
    var that = $(el);

    // test to see if its a captioned image
    if(that.parent().hasClass('wp-caption')) {
      that = $(that.parent());
    }

    var parent = that.parent();
    var parentHTML = parent[0].outerHTML;
    var childHTML = that[0].outerHTML;

    var newHTML = "</div>"; // close the .constrained div to break out
    newHTML += childHTML;
    newHTML += "<div class='constrained'>"; // open it back up again

    parentHTML = parentHTML.replace(childHTML,newHTML);
    parent.parent().html(parentHTML);
  });

使用jQuery关闭并重新打开HTML标记

4 个答案: