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

时间:2012-11-15 21:14:51

标签: javascript jquery jquery-selectors

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

<div class="sector_order">

    <div class="line_item_wrapper">
    SELECT THIS DIV
    </div>

    <div class="line_item_wrapper">
    NOT THIS DIV
    </div>

</div>

我这样想:

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

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

children('.line_item_wrapper :first')

谢谢!

4 个答案:

答案 0 :(得分:43)

您的问题是您的选择器有多种错误:

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

首次使用children()方法会返回两个元素,因为它们与提供的选择器匹配,并且类为line_item_wrapper;您需要明确说明您想要的两个中的哪一个,您可以使用:first选择器(或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);

参考文献:

答案 1 :(得分:12)

您将无效的选择器传递给children()。 而不是

.children('.line_item_wrapper :first')

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

答案 2 :(得分:2)

使用:first-child

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

.first()

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

答案 3 :(得分:1)

试试这个:

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

这将使sector_order成为line_item_wrapper的第一个直接后裔。

Example fiddle