Javascript jQuery将对象添加到动态父对象_Javascript_Jquery_Html

Javascript jQuery将对象添加到动态父对象

javascript jquery html

Javascript jQuery将对象添加到动态父对象,javascript,jquery,html,Javascript,Jquery,Html,jQuery新手，动态更改选择器有问题 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script> function addFirst(){ var fc = document.getElementById("fc").value; $("#parent").append("

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>


函数addFirst（）{
var fc=document.getElementById（“fc”）.value；
$（“#家长”）.append（“我无聊的文本”）；
fc=（fc-1）+2；
document.getElementById（“fc”）.value=fc；
}
函数addSecond（）{
$（***父选择器***）.append（“一些更无聊的文本”）；
}
假设this
关键字引用了目标元素，您可以使用
$(this).parent();

不管对象是如何创建的，选择器的工作原理都是一样的
$(this).parent().append("<div>Some more boring text.</div>");

例如：
这似乎更直观。如果您想在链接后直接添加第二个子项，则根本不需要.parent（）.append（）
，只需使用.after（）
：
示例：
函数中的这个
不是对所单击元素的引用。因此，函数addSecond（）{$（this）.parent（）.append（Blahblahblah）；}很糟糕，不喜欢注释中的代码示例。@Tim：在注释中的代码周围加上回记号。（在~
键上的那一个）这个addSecond（）
函数中的不是对所单击元素的引用。onClick参数是否更改？@am\u not\u i\u am：我知道。。。这就是为什么我要处理我答案的第二部分。@Tim：如果你只使用那一部分的话，那会的，但我建议在javascript中附加处理程序。它使代码更干净，jQuery负责为您传递对象引用。查看我的编辑。@不是吗？我是：你是说当addSecond（）函数中的选择器调用“this”时，它没有一个“this”可调用，因为它不知道“this”在哪里？你是否尝试过$（this）.after（）
而不是append（）？我实际上使用了.prepend（）。它们基本上都做相同的事情，只是你想去哪里。我将activator链接放在我希望内容进入的div中，以避免任何父/子混淆。最重要的部分是：
$(this).parent();

$(this).parent().append("<div>Some more boring text.</div>");

<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>

<input type="hidden" id="fc" value="1"
<div id="parent">
   <a href="#" onClick=" class="addfirst">Add First Child</a>
</div>