jquery选择具有类的父类的第一个子类

clone()的目的,我如何只选择具有特定类的父类的特定类的第一个子clone()

 
SELECT THIS DIV
NOT THIS DIV

我这样想:

 var form1 = $(this) .parents('.sector_order') .children('.line_item_wrapper') .children().clone(true) 

并使用类line_item_wrapper获取两个内部div,但是当我尝试使用此添加时,我得到一个空对象:

 children('.line_item_wrapper :first') 

谢谢!

你的问题是你的选择器在某些方面是错误的:

parents()返回一个,两个或多个与传递给方法的选择器匹配的元素; 将自己限制在第一个匹配的元素中使用closest() (返回一个或没有与传入选择器匹配的元素)。

你第一次使用children()方法返回两个元素,因为它们匹配提供的选择器并且具有line_item_wrapper类; 你需要明确说明你想要的两个中的哪一个,你可以使用:first selector(或first()方法),或者:first-child选择器。

children()方法的第二次调用会查找由选择器匹配的第一个元素的子元素,这些元素似乎不是您想要的。

无论如何,如果你必须使用父(从相同的$(this)元素开始):

 var form1 = $(this).closest('.sector_order').find('.line_item_wrapper:first').clone(true); 

要么:

 var form1 = $(this).closest('.sector_order').find('.line_item_wrapper').first().clone(true); 

要么:

 var form1 = $(this).closest('.sector_order').find('.line_item_wrapper:first-child').clone(true); 

或者,坦率地说,一种更简单的方法(但这确实省去了父类名检查):

 var form1 = $(this).prevAll('.line_item_wrapper:last'); 

要么:

 var form1 = $(this).siblings('.line_item_wrapper').eq(0); 

参考文献:

  • closest()
  • eq()
  • find()
  • :first
  • :first-child
  • first()
  • :last
  • parents()
  • prevAll()
  • siblings()

您将无效的选择器传递给children() 。 代替

 .children('.line_item_wrapper :first') 

尝试

 .children('.line_item_wrapper').first() 

使用:first-child

 var form1 = $(this).closest('.sector_order').find(':first-child'); 

.first()

 var form1 = $(this).closest('.sector_order').find('.line_item_wrapper').first(); 

试试这个:

 var $firstDiv = $(".sector_order > .line_item_wrapper:eq(0)"); 

这将使用sector_order类获得line_item_wrapper的第一个直接后代。

示例小提琴