jquery怎么添加一个父节点?

mypoly
  • 1.8k

原来的dom结构是这样的:

        <div class="card">
            <div class="card-block">
                <a href="#" class="card-link">苹果</a>
            </div>
            <div class="card-block">
                <a href="#" class="card-link">桃子</a>
            </div>
            <div class="card-block">
                <a href="#" class="card-link">香蕉</a>
            </div>
        </div>

我想改成这样:

        <div class="card">
            <div class="card-block">
                <a href="#" class="card-link">苹果</a>
            </div>
        </div>
        <div class="card">
            <div class="card-block">
                <a href="#" class="card-link">桃子</a>
            </div>
        </div>
        <div class="card">
            <div class="card-block">
                <a href="#" class="card-link">香蕉</a>
            </div>
        </div>

我想用jquery给每个.card-block添加一个父元素.card,然后在控制台把它复制出来粘贴到另一个文件里,再把最外层的.card删除,好像任务就完成了。

问题:
文档里好像没看到怎么添加父元素,应该怎么做呢?

回复
阅读 3.8k
4 个回答

是不是这么写?

$(".card-block")
    .wrap("<div class='card'></div>")
    .parent()
    .unwrap();

jquery有个wrap方法,文档还是得好好看哦。

//1用于给添加div 
// $(function(){
//     $('.card-block').wrap('<div class="card"></div>');
// })


//2.但是你最外层还有<div class="card">,去不掉,所以就直接元素清空,然后在添加结构
$(function(){
    $('.card').remove();
    $('.body').html(        <div class="card">
        <div class="card-block">
            <a href="#" class="card-link">苹果</a>
        </div>
    </div>
    <div class="card">
        <div class="card-block">
            <a href="#" class="card-link">桃子</a>
        </div>
    </div>
    <div class="card">
        <div class="card-block">
            <a href="#" class="card-link">香蕉</a>
        </div>
    </div>, function)
})
var text=$(".card-block").wrap($("<div>").addClass('card')).parent().parent().html();
        console.log(text)
你知道吗?

宣传栏