jquery - 在jquery中删除围绕选定图像的锚标记

Question

我有一段代码，当页面加载时，它会检查一系列图像并查看它们的 id 是否包含单词 video。

如果是这样，我希望能够删除图像周围的锚标记。但是，我目前正在执行此操作的方式（通过 .remove()）会删除图像，因为它位于我要删除的锚标记内。

有没有办法只删除锚标签？注意：图像列表将根据访问它们的用户拉入，因此它不会是可以附加的预先确定的代码。

代码：

$(document).ready(function() {
    $('ul.thumbnails li a img').each(function() {
        if($(this).attr('id').indexOf('video') != -1){
            var $parent = $(this).closest('a');
            $parent.remove();
        } else {
            $(this).addClass('photo');
        }
    });
});

Answer 1

尝试使用jQuery 解包：

$(document).ready(function() {
    $('ul.thumbnails li a img').each(function() {
        if($(this).attr('id').indexOf('video') != -1){
            $(this).unwrap();
        } else {
            $(this).addClass('photo');
        }
    });
});

Answer 2

问题是您的锚标记包含您的图像，因此当您删除锚时，您也会删除其中的图像。尝试这个：

$(document).ready(function() {
    $('ul.thumbnails li a img').each(function() {
        if($(this).attr('id').indexOf('video') != -1){
            var $parent = $(this).closest('a');
            $parent.replaceWith($(this).html());
        } else {
            $(this).addClass('photo');
        }
    });
});

所以我用图像标签替换锚标签，而不是删除锚

Answer 3

当你删除一个元素时，它的所有子元素也会被删除。因此，您需要先克隆并附加图像。考虑使用克隆功能，尤其是当您需要维护事件处理程序时。

尝试：

$(this).closest('li').append($(this).clone());

在删除 $parent 之前。