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

jQuery Add object to dynamic parent

本文关键字：对象 动态 添加 jQuery      更新时间：2023-09-26

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会传递给函数，允许您查找该对象的父对象等。

你可以进一步清理这个代码，但我猜不出你是如何使用它的。我猜你想把孩子们添加到不同于他们实际结束的地方。

示例：http://jsfiddle.net/2LjYH/

如果我猜测的话，我会让#parent包装"添加第一个孩子"链接，如下所示：

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

示例：http://jsfiddle.net/XjUzA/

这似乎更直观地起作用。如果你想直接在链接后面添加第二个孩子，你根本不想要.parent().append()，你只想使用.after():

示例：http://jsfiddle.net/XjUzA/1/

假设this关键字指的是目标元素，则可以使用选择父元素

$(this).parent();
相关文章：