Question

// jQuery 2.2.2

var set = $('<p></p><b></b><i></i>');
set.filter('b').replaceWith('<a></a>');
console.log( set );

我希望将<b>更改为<a>元素，但不是。

如果不使用filter然后使用replaceWith，如何替换元素？

（要替换<a>的元素<b>有事件）

Answer 1

根据replaceWith docs：

从jQuery 1.9开始，.after()，.before()和*.replaceWith()始终返回原始的未修改集。试图在没有父节点的节点上使用这些方法没有效果 - 也就是说，它所包含的集合和节点都没有改变。

您的问题就是这样：该集合没有父母。

快速测试显示replaceAll也没有帮助 - 它还要求该集合具有父级。

一种可能的解决方案是进行文本替换（在HTML级别上）。

另一种解决方案是人工创建父母，例如使用wrapAll，例如：

var set = $('<p></p><b></b><i></i>');
set = set.wrapAll('<div></div>').parent();
set.children('b').replaceWith('<a></a>');
set = set.children();
console.log( set ); // p, a, i

或者将三行合二为一（可论证的更具可读性）：

var set = $('<p></p><b></b><i></i>');
set = set.wrapAll('<div></div>').parent().children('b').replaceWith('<a></a>').end().children();
console.log( set ); // p, a, i

另一种方法是使用map代替replaceWith：

var set = $('<p></p><b></b><i></i>');
set = set.map(function(){
    return $(this).is('b') ? $('<a></a>').get() : this;
})
console.log( set ); // p, a, i

Answer 2

var set = $('<p></p><b></b><i></i>');

通过插件：

$.fn.replaceInSet = function(selector, replacement){
    if( replacement instanceof jQuery )
        replacement = replacement[0];

    return this.map(function(){
        return $(this).is(selector) ? replacement : this;
    });
}

用法：

set = set.replaceInSet('b','a') // MUST assign the result to "set"!

~~目前，我发现解决此问题的唯一方法是：~~

OR：

// the set of elements

set = $('<p>')            // create a fake element container
  .append(set)            // move the set inside it
  .find('b')              // now "find" could be used
  .replaceWith('<a>')     // replace the found element
  .end()                  // go back to the "p"
  .contents();            // fetch the set again

console.log(set) // will now include `<a>` and not `<b>`

jQuery - 替换集合（集合）中的元素

2 个答案:

通过插件：

用法：

OR：