时间戳

首页 > 解决方案 > jQuery 或原生 JS 替换整个元素 (div)，包括其 id、类和数据

javascript - jQuery 或原生 JS 替换整个元素 (div)，包括其 id、类和数据

问题描述

假设有几个类似的元素，例如：

<div id="element_01" class="element" data-id="01" data-color="blue">
    Some content
</div>

<div id="element_02" class="element" data-id="02" data-color="yellow">
    Some content
</div>

<div id="element_03" class="element" data-id="03" data-color="green">
    Some content
</div>

通过 AJAX 调用，我必须获取一个新的整个元素，包括它的所有属性，并用它替换上面的元素之一。加载的元素可能如下所示：

<div id="element_02" class="element active" data-id="02" data-color="red">
    Some NEW content
</div>

如您所见，它实际上与原始组中的 element_02 相同，但具有不同的内容、附加的类和不同的 data-color 值。所需的结果应如下所示：

<div id="element_01" class="element" data-id="01" data-color="blue">
    Some content
</div>

<div id="element_02" class="element active" data-id="02" data-color="red">
    Some NEW content
</div>

<div id="element_03" class="element" data-id="03" data-color="green">
    Some content
</div>

我知道如何将一个元素的内容加载到另一个元素中，这将是：

$('#element_02').load(url+' > *');

但是，如前所述，这只会将内容加载到元素中，而只留下类和数据属性。

当然，我可以手动将新类添加到元素中，并在加载后使用函数手动更改数据值，如下所示：

$('#element_02').load(url+' > *', function(){

   $('#element_02').addClass('active');
   $('#element_02').data('color', 'red');

});

但我想知道是否有一种更通用的方法可以处理所有父属性，而无需手动添加或更改它们。

我的想法是这样的。

像这样的东西在加载时不会出现大问题和故障吗？

也许有人对此有解决方案。谢谢。

标签： javascripthtmljqueryajaxattr

解决方案

我现在确实设法用建议的想法自己解决了这个问题。可能不完美，但有效。

function ReplaceElementCompletely(id) { 
    
    $('.element[data-id="'+id+'"]').addClass('remove_this');
    
    $('<div class="temporary"></div>').insertAfter('.element[data-id="'+id+'"]');

    $('div.temporary').load(url+' .element[data-id="'+id+'"]', function(){

        $('.temporary > .element').insertBefore('.temporary');
        $('.temporary').remove();
        $('.remove_this').remove();

    });
    
}   
    
ReplaceElementCompletely('02');

推荐阅读