jQuery将对象添加到动态父级

Question

jQuery将对象添加到动态父级

3

刚开始使用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>

我需要一个选择器，当父对象是动态创建的时，可以获取该对象的直接父级，如我的文本“父级选择器”所示。编辑我的解决方案是在onClick事件中使用.call。

位于addFirst()函数的字符串中：

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

然后，修改了 addSecond() 函数：

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

- Plummer

你试过使用 $(this).after() 而不是 append() 吗？ - Aprillion

我实际上使用了.prepend()。它们基本上做相同的事情，只是取决于您想要内容放置的位置。我将激活器链接放在了我想要内容进入的div中，以避免任何父/子混淆。最有区别的部分是：<<a href='#' onClick='addSecond.call(this,\"#firstChild" + fc + "\"); return false;'></a>.call将函数addSecond()中的选择器参数设置为我指定的任何对象。然后，在函数中：$(this.parentNode).prepend(<div>BlahBlah</div>); - Plummer

2个回答

1

假设this关键字指的是目标元素，您可以使用以下方法选择其父级：

$(this).parent();

- detaylor

addSecond() 函数中的 this 不是指向被点击的元素。 - user1106925

所以，

function addSecond(){
  $(this).parent().append(Blahblahblah);
}

很遗憾，在评论中没有对代码示例的喜爱。 - Plummer

@Tim：在注释中的代码周围加上反引号（~键上的那个）。 - Jeff B

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeff B · Accepted Answer

对象是如何创建的并不重要，选择器的作用都是相同的。

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