Question

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>

我需要一个选择器，当动态创建父对象时，它会让我成为对象的直接父对象，如我的文本“ PARENT SELECTOR ”所示。

修改的

我的解决方案是，如果有其他人遇到这个问题，就是在onClick事件中使用.call。

位于 addFirst（）函数的字符串中：

<a href='#' onClick='addSecond.call(this,\"firstChild" + fc +"\"); return false;'>

然后，更改了 addSecond（）功能：

$(this.parentNode).prepend("<div>BlahBlah");

Answer 1

假设this关键字引用目标元素，您可以使用

选择父元素

$(this).parent();

Answer 2

对象的创建方式无关紧要，选择器的工作方式也一样。

$(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/

jQuery将对象添加到动态父级

2 个答案: