为什么jQuery .after（）不链接新元素？ [英] Why does jQuery .after() not chain the new element?

问题描述

我很好奇为什么jQuery的.after（）没有链接或提供给你，你用它创建的新元素。在我看来，它应该是这样，但我不是专家，并希望有人能够阐明为什么这是一个坏主意。下面是一个例子，看看我想从.after（）中获得什么：

以下是一些标记：

 < div id =content1> 
< p id =hello1>你好< / p> 
< / div> 
< div id =content2> 
< p id =hello2>你好< / p> 
< / div> 
  

这就是我想要的，但是这个用World！代替Hello：

（'< p />'）.text（'World！'）;

  $（'＃hello1'）。 
  

这可以做到这一点，但它确实很难看：

$ b （'< p />'）; $ b

  $（'＃hello2'）。 
 var $ newParagraph = $（'＃content2 p'）。last（）; 
 $ newParagraph.text（'World'）; 
  

这个更好，但我没有完全卖掉:(可能我应该？） （$（'< p />'）.text（'World'）后面的$（$＃

  $（'＃hello1'））。 ）; 
  

请注意，这显然是一个简化的例子，即< p> World！ p>中不是我想要补充的，我的真实世界问题比这更复杂。

感谢您的任何想法。

解决方案

推测 .after（）的工作方式可以让您链接更多适用于最初选定元素的方法（$（'< p />>'）。

  $（'＃hello1'）。 text（'World'））
 .before（$（'< p />').text('Before text'））
 .remove（）; 
  

这可以使行为与其他方法保持一致，所以您不必尝试记住哪些返回原始对象并返回其他对象。

请注意，在您的情况下 $（'＃hello1'）因为您是通过id来选择的，所以您只能选择一个元素，但是您可以将 .after（）应用于包含许多元素的jQuery对象，以在多元素之后添加（克隆） （$（'< p />'）。text（'）'之后的

  $（'div.someclass'随你'） ）; 
  

在我看来，将链接上下文保留为原始jQuery对象是非常有意义的。

.insertAfter（） method 可能更接近你想要的：

  $（'< p />'） .insertAfter（ '＃hello1'）文本（ '世界'）。 
  

（它也返回它应用到的jQuery对象，但它在反向 。）

你可以编写你自己的插件方法来返回被添加的元素，但是这会让人困惑，因为它会和所有标准方法相反。

I am curious why jQuery's .after() does not chain, or "provide you with," the new element that you create with it. It seems to me like it should, but I am no expert and was hoping someone could shed some light on why it's a bad idea. Here's an example to see what I would like from .after():

Here is some markup:

<div id="content1">
    <p id="hello1">Hello</p>
</div>
<div id="content2">
    <p id="hello2">Hello</p>
</div>

Here's what I want, but this replaces "Hello" with "World!":

$('#hello1').after('<p />').text('World!');

This does the job, but it sure is ugly:

$('#hello2').after('<p />');
var $newParagraph = $('#content2 p').last();
$newParagraph.text('World');

This is nicer, but I'm not entirely sold: (maybe I should be?)

$('#hello1').after( $('<p />').text('World') );

Note this is obviously a simplified example, that is, "<p>World!</p>" is not what I want to add, my real world problem is more complex than that.

Thanks for any thoughts.

解决方案

Presumably .after() works as it does to allow you to chain more methods that would apply to the originally selected element(s):

$('#hello1').after( $('<p />').text('World') )
            .before( $('<p />').text('Before text') )
            .remove();

This keeps the behaviour consistent with other methods, so you don't have to try to remember which ones return the original object and which return some other object.

Note that in your case $('#hello1') selects exactly one element since you are selecting by id, but you can apply .after() to a jQuery object containing many elements to add (cloned) content after multiple elements:

$('div.someclass').after( $('<p/>').text('whatever') );

In which case in my opinion it definitely makes sense to keep the chaining context as the original jQuery object.

The .insertAfter() method might be closer to what you want:

$('<p/>').insertAfter('#hello1').text('World');

(It also returns the jQuery object it was applied to, but it does the insert in "reverse".)

You could write your own plugin method to return the element being added, but that would be confusing since it would work opposite to all the standard methods.

这篇关于为什么jQuery .after（）不链接新元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！