jQuery insertAfter 不是一个函数

Posted

技术标签:

【中文标题】jQuery insertAfter 不是一个函数【英文标题】:jQuery insertAfter is not a function 【发布时间】:2019-11-06 02:53:12 【问题描述】:

我需要将元素插入到每个外部的 Dom 元素中:

$items1 = [];
$.each($('.qs-option-name'), function () 
   if($(this).find('span.highlighted').length === 1)
      $item  = $(this).parent().parent();
      console.log($item);
      $items1.push($item);
   
 );
 console.log($items1);
 $items1.insertAfter('ul li.first');

console.log() 里面的每个:

console.log() 外部为每个:

不确定再次循环插入数组是否有效有没有办法一次性插入一个 DOM 元素数组?

【问题讨论】:

【参考方案1】:

问题是因为$items1 是一个jQuery 对象数组,因此没有insertAfter() 方法。

要解决这个问题,您可以从数组中创建一个 jQuery 对象:

$($items1).insertAfter('ul li.first');

您也可以使用add() 来组合 jQuery 对象,而不是创建一个基本数组:

var $items1 = $();
$('.qs-option-name').each(function() 
  if ($(this).find('span.highlighted').length === 1) 
    $item = $(this).parent().parent();
    $items1.add($item);
  
);
$items1.insertAfter('ul li.first');

但是,您可以使用:has()map() 使逻辑更简洁:

var $items1 = $('.qs-option-name:has(span.highlighted)').map(function() 
  return $(this).parent().parent();
).get();
$items1.insertAfter('ul li.first');

请注意,上面的内容略有不同,:has() 将匹配任何子项,不仅像您的原始实例那样匹配单个实例,而且考虑到似乎并不重要的区别的上下文。

【讨论】:

我也发现我可以使用prepend 但我给它尝试按照你的建议创建对象表单数组!

以上是关于jQuery insertAfter 不是一个函数的主要内容,如果未能解决你的问题,请参考以下文章

[ jquery 文档处理 insertAfter(content) after(content|fn) ] 此方法用于把所有匹配的元素插入到另一个指定的元素元素集合的后面,实现外部插入

jQuery 文档操作 - insertAfter() ,insertBefore() 方法

jQuery insertAfter( ) 方法

jQuery insertAfter方法

jQuery 文档操作 - insertAfter() ,insertBefore(),after(),before() 方法

DOM外部插入insertAfter()与insertBefore()