jQuery将对象添加到动态父级
[英]jQuery Add object to dynamic parent
问题描述
New to jQuery, having an issue with dynamically changing the selector. 
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>
I need a selector that gets me the direct parent of an object when that parent object has been created dynamically, as indicated by my text " THE PARENT SELECTOR ". 我需要一个选择器，当动态创建父对象时，它会让我成为对象的直接父对象，如我的文本“ THE PARENT SELECTOR ”所示。
EDIT 编辑
My solution to this, in case anyone else comes across this question, was to use .call inside the onClick event. 我遇到这个问题的解决方案就是在onClick事件中使用.call。
Located in the string of the addFirst() function: 位于addFirst（）函数的字符串中：
<a href='#' onClick='addSecond.call(this,\"firstChild" + fc +"\"); return false;'>
Then, changed the addSecond() function: 然后，更改了addSecond（）函数：
$(this.parentNode).prepend("<div>BlahBlah");
2 个解决方案
解决方案1
1 2012-02-29 17:12:29
假设this关键字引用目标元素，您可以选择父元素
$(this).parent();
解决方案2
1 已采纳 2012-02-29 17:13:13
It shouldn't matter how the object was created, the selector will work the same. 无论对象是如何创建的，选择器都将起作用。
$(this).parent().append("<div>Some more boring text.</div>");
As noted, this will not work unless you pass a reference to your object. 如上所述，除非您传递对象的引用，否则这将不起作用。 You could leverage jQuery more and all of this will be much easier: 您可以更多地利用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>
Note, that I added a class addfirst and addsecond . 注意，我添加了一个类addfirst和addsecond 。 These are used to add handlers to the links automatically (or more accurately, attach handlers to the body, which trigger when divs with these classes are clicked). 这些用于自动向链接添加处理程序（或者更准确地说，将处理程序附加到正文，当单击具有这些类的div时触发处理程序）。 When they are clicked, this is passed to the function, allowing you to find that object's parent, etc. 当他们被点击， this是传递给函数，可以让你找到对象的父等
You could clean this code up even further, but I can't guess how you are using it. 您可以进一步清理此代码，但我无法猜测您是如何使用它的。 I am guessing you want the children added somewhere different than where they are actually ending up. 我猜你想要把孩子们添加到与实际结局不同的地方。
Example: http://jsfiddle.net/2LjYH/ 示例： http ： //jsfiddle.net/2LjYH/
If I were to guess, I would make #parent wrap the "Add First Child" link, like this: 如果我猜，我会让#parent包装“添加第一个孩子”链接，如下所示：
<input type="hidden" id="fc" value="1"
<div id="parent">
<a href="#" onClick=" class="addfirst">Add First Child</a>
</div>
Example: http://jsfiddle.net/XjUzA/ 示例： http ： //jsfiddle.net/XjUzA/
This seems to work more intuitively. 这看起来更直观。 And if you want the second child added directly after the link, you don't want .parent().append() at all, you simply want to use .after() : 如果你想在链接后直接添加第二个孩子，你根本不需要.parent().append() ，你只想使用.after() ：
Example: http://jsfiddle.net/XjUzA/1/ 示例： http ： //jsfiddle.net/XjUzA/1/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.