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

标签 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("<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>

请注意,我添加了一个类 addfirstaddsecond。这些用于自动将处理程序添加到链接(或更准确地说,将处理程序附加到正文,当单击具有这些类的 div 时触发)。当它们被点击时,this 被传递给函数,允许您找到该对象的父对象等。

您可以进一步清理此代码,但我无法猜测您是如何使用它的。我猜您希望将 child 添加到与实际结束位置不同的位置。

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

如果我猜的话,我会让 #parent 包裹“Add First Child”链接,如下所示:

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

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

这似乎更直观。如果你想在链接之后直接添加第二个 child ,你根本不需要 .parent().append(),你只想使用 .after():

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

关于javascript - jQuery 将对象添加到动态父对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9503508/

相关文章:

html - 如何使 <hr> 全宽?

Python:充满 BOM 的 Youtube HTML

javascript - 单击链接时显示 div 内容

javascript - 使用 jqgrid 和 Angular ui Bootstrap 中的弹出窗口

javascript - 将元素移到左侧 javascript/css

javascript - Typeahead.js:页脚查询如何工作?

javascript - 谷歌地图劫持​​了 iphone 的滚动(触摸事件)——如何恢复?

javascript - Jasmine 测试以验证回调不会引发错误

Jquery Serialize 仅适用于 IE

javascript - Javascript 中的 HTML5 拖放事件