个人中心
gpt4 book ai didi

javascript - 从最新的 append() 调用中获取元素

转载 作者：行者123 更新时间：2023-11-30 09:08:00 26 4
gpt4 key购买 nike

如果使用 append() 插入新的 DOM 节点，是否可以将链上下文移动到新元素？

此示例代码说明了主题:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                      "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript"><!--
$(function(){
    $("<div></div>")
        .appendTo("body")
        .append("<span>Click me</span>")
        .click(function(){
            alert("Clicked on <" + this.tagName + ">, <SPAN> expected");
        });
});
//--></script>
</head>
<body>

</body>
</html>

此代码将一个 onclick 处理程序附加到 <div> , 但我想要它在新的 <span> 中.

编辑:澄清

我想我在考虑一个直接函数，例如 add()或 andSelf()这不会破坏链流那么多<:-)

编辑:解决方案总结

备案:似乎没有本地人 findAppended()功能。这些是一些替代方案:

改变创建流程:

$("<span>Click me</span>")
    .appendTo("body")
    .wrap("<div></div>")
    .click(function(){
        alert("Clicked on <" + this.tagName + ">, <SPAN> expected");
    });

将新元素存储在变量中:

var span = $("<span>Click me</span>")
    .click(function(){
        alert("Clicked on <" + this.tagName + ">, <SPAN> expected");
    });
$("<div></div>")
    .appendTo("body")
    .append(span);

开始一个新的子链:

$("<div></div>")
    .appendTo("body")
    .append(
        $("<span>Click me</span>")
        .click(function(){
            alert("Clicked on <" + this.tagName + ">, <SPAN> expected");
        })
    );

创建新元素后查找:

$("<div></div>")
    .appendTo("body")
    .append("<span>Click me</span>")
    .find("span:last")
    .click(function(){
        alert("Clicked on <" + this.tagName + ">, <SPAN> expected");
    })
    .end(); // Not necessary here, used to illustrate how to continue the chain

注意:代码未经测试。

最佳答案

将其分解可能更好，但您需要从元素开始或找到它。所以你可以:

 $("<div></div>")
        .appendTo("body")
        .append("<span>Click me</span>")
        .find('span')
        .click(function(){
            alert("Clicked on <" + this.tagName + ">, <SPAN> expected");
        });

或

$('<span>Click me</span>')
     .appendTo("body")
     .wrap('<div />')
     .click(function(){
                alert("Clicked on <" + this.tagName + ">, <SPAN> expected");
            });

find和 wrap

编辑:关于OP编辑

牢记.add() ( http://api.jquery.com/add/ ) 已经存在并且正如其名称所暗示的那样。还有，像

var $span = $('<span>click me</span>').click( 
                 function() {
                     alert("Clicked on <" + this.tagName + ">, <SPAN> expected");
                 });
$('<div></div>').append($span).appendTo('body');

最终将使您的代码更易于管理和可读

jQuery 已经有分类方法来过滤和遍历 dom。对于 DOM，您可以轻松使用 .find('span')到达元素 - 或 .children('span') - 使用好的选择器和整体网站架构在这里很重要。

另外，.end()功能非常糟糕:

$('ul').append('<li>test</li><li>test2</li>') // add two li elements
    .children().eq(0).css('background-color', '#ff0000') // change the background of the first child
    .end().css('margin-left', '20px'); //revert to the original data-set (the ul) and change its margin

关于javascript - 从最新的 append() 调用中获取元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3192937/

26 4 0
文章推荐： python - 如何在 Python 中实现平均感知器(不使用 Scikit-learn)
文章推荐： machine-learning - tf.nn.embedding_lookup 带有浮点输入？
文章推荐： Javascript:如何在处理程序中保留对请求发起者的引用？
文章推荐： java - JNDI - WAS 7 中的 JDBC 资源查找失败
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com