Question

$('h1').click(function(){
    var span = $(this).find('.secondary');
    alert(span);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
    Hello 
    <span class='secondary'>World</span>
</h1>

如何复制整个.secondary元素并像这样提醒

<span class='secondary'>World</span>

Answer 1

您的解决方案存在一些问题：

alert范围outerHTML ，而不仅仅是JQuery范围对象。
.secondary而不是secondary （.表示它是一个类，请阅读更多here）。
使用$(document).ready() 这将确保加载JQuery并准备好使用，并且在运行任何JQuery之前加载所有元素。

最后，解决了所有这些问题后，您的代码应如下所示：

＆＃13;

$(document).ready(function () {
    $('h1').click(function () {
        var span = $(this).find('.secondary');
        alert(span[0].outerHTML);
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
    Hello 
    <span class='secondary'>World</span>
</h1>

＆＃13;

Answer 2

您想要的是当前所选元素的外部HTML。在jQuery中没有直接的功能，所以你需要：

首先将其包装在另一个元素中，
然后向上转到该包装元素
现在你可以使用html()来获取这个包装元素的内部html，它实际上是原始元素的外部html。

您可以使用jQuery的clone()方法创建副本并对该克隆元素执行操作，从而保持原始元素不变。

＆＃13;

$('h1').click(function(){
    var span = $(this).find('.secondary').clone().wrap('<p>').parent().html();
    alert(span);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
    Hello 
    <span class='secondary'>World</span>
</h1>

＆＃13;

Answer 3

然后将html元素作为字符串抓取：

document.documentElement.outerHTML

    <script>
        $('h1').click(function () {
            var span = document.find('secondary').outerHTML;
            alert(span);
        })
    </script>

如何复制和警告子元素

3 个答案: