Question

我正在使用filter()选择元素列表，然后尝试使用replaceWith()替换它们。 html在变量上保存为字符串。似乎replaceWith()对我不起作用。当我记录变量content时，它会显示原始字符串。

我是否知道js对象是引用。所以，我的印象是替换选择也会替换字符串中的元素。

以下是代码

var content = '<div class="feature-box" contenteditable="false" data-sh-attr="%20title%3D%22jhk%22%20width%3D%224%22%20icon%3D%22thumbs-up%22" data-sh-content="kj"><div class="btn-panel"><a class="delete" href="#"><i class="fa fa-trash"> </i></a> <a class="edit" href="#"><i class="fa fa-pencil"> </i></a></div><div class="feature-icon-container"><i class="fa fa-thumbs-up main-icon"> </i></div><div class="feature-content"><h3>jhk</h3><div class="content">kj</div></div><div> </div></div><p>[block background_color="red" color="white"]Content of the block[/block]</p><p>This is an example page. It\'s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:</p><blockquote><p>Hi there! I\'m a bike messenger by day, aspiring actor by night, and this is my blog. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin\' caught in the rain.)</p></blockquote><p>...or something like this:</p><div class="feature-box" contenteditable="false" data-sh-attr="%20title%3D%22kk%22%20width%3D%224%22%20icon%3D%22thumbs-up%22" data-sh-content="kk"><div class="btn-panel"><a class="delete" href="#"><i class="fa fa-trash"> </i></a> <a class="edit" href="#"><i class="fa fa-pencil"> </i></a></div><div class="feature-icon-container"><i class="fa fa-thumbs-up main-icon"> </i></div><div class="feature-content"><h3>kk</h3><div class="content">kk</div></div><div> </div></div><blockquote><p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p></blockquote><p>As a new WordPress user, you should go to <a href="http://localhost/l/factory/wp-admin/">your dashboard</a> to delete this page and create new pages for your content. Have fun!</p>';


jQuery(content).filter('.feature-box').each(function(){
    var $this = jQuery(this);   
    var attr = decodeURIComponent($this.data('sh-attr'));
    var content = decodeURIComponent($this.data('sh-content'));
    var shortcode = '[feature' + attr + ']' + content + '[/feature]';
    $this.replaceWith(shortcode);

});
console.log(content);

js使用

http://jsfiddle.net/du8d45tt/

Answer 1

您正在创建一个dom结构并正在修改dom结构，该结构不会修改原始字符串

要获取更新的html，您需要获取dom结构的更新内容。

var $tmp = $('<div />', {
    html: content
})

$tmp.find('.feature-box').each(function () {
    var $this = jQuery(this);
    var attr = decodeURIComponent($this.data('sh-attr'));
    var content = decodeURIComponent($this.data('sh-content'));
    var shortcode = '[feature' + attr + ']' + content + '[/feature]';
    $this.replaceWith(shortcode);

});

var replaced = $tmp.html()
console.log(replaced);

演示：Fiddle

Answer 2

您实际上并未在任何地方分配更新后的HTML。 $this.replaceWith(shortCode);更新$this而非content。

您可以使用.html()获取更新的内容并将其分配回来 content = $this.replaceWith(shortcode).html();

由于jQuery asynchronous方法具有each性质，它会运行回调，您还应该在每个函数中都有console.log。

jQuery(content).filter('.feature-box').each(function(){
    var $this = jQuery(this);   
    var attr = decodeURIComponent($this.data('sh-attr'));
    var content = decodeURIComponent($this.data('sh-content'));
    var shortcode = '[feature' + attr + ']' + content + '[/feature]';
    content = $this.replaceWith(shortcode).html();
    console.log(content);
});

Answer 3

字符串是JavaScript中的不可变对象，因此您需要使用其他值覆盖它：

content = jQuery('<div>', {html: content})
  .find('.feature-box')
    .replaceWith(function() {
      var $this = jQuery(this);   
      var attr = decodeURIComponent($this.data('sh-attr'));
      var content = decodeURIComponent($this.data('sh-content'));

      return '[feature' + attr + ']' + content + '[/feature]';
    })
    .end()
  .html();

这也使用.replaceWith(fn)语法作为.each()的便捷快捷方式，并在其中使用.replaceWith()。

jQuery replaceWith（）用于HTML字符串

3 个答案: