JQuery替换DOM节点

需求描述:

Ajax获取的数据是一段Html代码并将原来DOM节点对应的内容替换掉。

如:获取到的内容为

<div><div class='one'>
  <div class='c'></div>
  <div class='d'></div>
</div> </div>

原有DOM节点:

<div class='one'>
  <div class='a'></div>
  <div class='b'></div>
</div>

实现:

$body.on('click', '.product-wrap .hover-panel .colors li', function () {
            var $this = $(this);

            $.ajax({
                url: getUncachedUrl($this.data('url')),
                type: 'POST',
                success: function (data) {
                    $this.closest('.one').html($('.one', data).html());
                }
            });
            return false;
        });

遇到的问题及注意:

1、若当页面的节点是通过Ajax添加的,那么不能通过类选择器直接为其绑定事件。

2、$this.closest('.a').html($('.a', data).html()); 替换DOM节点内容函数

3、JQuery不能直接替换最外层div。也就是说,当.one为最外层div时,不能实现替换。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值