jQuery 新手,在动态更改选择器时遇到问题。
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
function addFirst(){
var fc = document.getElementById("fc").value;
$("#parent").append("<div id='firstChild" + fc + "'>My boring text.</div><a href='#' onClick='addSecond(\"firstChild" + fc +"\")'>Add Second Child</a>");
fc = (fc - 1) + 2;
document.getElementById("fc").value = fc;
}
function addSecond(){
$(***THE PARENT SELECTOR***).append("<div>Some more boring text.</div>");
}
</script>
<body>
<input type="hidden" id="fc" value="1"
<div id="parent"></div>
<a href="#" onClick=" addFirst('#parent');">Add First Child</a>
</body>
</html>
我需要一个选择器,当父对象是动态创建的时,它让我成为该对象的直接父对象,如我的文本“THE PARENT SELECTOR”所示。
编辑
我的解决方案是在 onClick 事件中使用 .call,以防其他人遇到这个问题。
位于addFirst()函数的字符串中:
<a href='#' onClick='addSecond.call(this,\"firstChild" + fc +"\"); return false;'>
然后,更改addSecond() 函数:
$(this.parentNode).prepend("<div>BlahBlah");
最佳答案
对象的创建方式无关紧要,选择器的工作方式相同。
$(this).parent().append("<div>Some more boring text.</div>");
如前所述,除非您传递对对象的引用,否则这将不起作用。您可以更多地利用 jQuery,所有这一切都会容易得多:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function() {
$("body").on('click', '.addsecond', function() {
$(this).parent().append("<div>Some more boring text.</div>");
});
$("body").on('click', '.addfirst', function() {
var fc = $('.fc').length + 1;
$("#parent").append("<div id='firstChild" + fc + "' class='fc'>My boring text.</div><a href='#' class='addsecond'>Add Second Child</a>");
});
});
</script>
</head>
<body>
<div id="parent">
<a href="#" onClick=" class="addfirst">Add First Child</a>
</div>
</body>
</html>
请注意,我添加了一个类 addfirst
和 addsecond
。这些用于自动将处理程序添加到链接(或更准确地说,将处理程序附加到正文,当单击具有这些类的 div 时触发)。当它们被点击时,this
被传递给函数,允许您找到该对象的父对象等。
您可以进一步清理此代码,但我无法猜测您是如何使用它的。我猜您希望将 child 添加到与实际结束位置不同的位置。
如果我猜的话,我会让 #parent
包裹“Add First Child”链接,如下所示:
<input type="hidden" id="fc" value="1"
<div id="parent">
<a href="#" onClick=" class="addfirst">Add First Child</a>
</div>
这似乎更直观。如果你想在链接之后直接添加第二个 child ,你根本不需要 .parent().append()
,你只想使用 .after()
:
关于javascript - jQuery 将对象添加到动态父对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9503508/