Question

考虑以下HTML

我正在尝试将子元素（label / input）包装在标签文本为“This one”的位置。基本上，我需要选择没有class partial的完整元素，如果它们包含输入文本元素而不是数字uinput元素。选择一个完整元素，其子元素需要完全用<div class="wrapped"></div>

完全包裹

<div class="group">
    <div class="full">
        <label>This one</label>
        <input type="text"/>
    </div>
    <div class="full partial">
        <label>Foo</label>
        <input type="text"/>
    </div>
    <div class="full">
        <label>Foo</label>
        <input type="number"/>
    </div>
    <div class="full">
        <label>This one</label>
        <input type="text"/>
    </div>
    <div class="full">
        <label>Foo</label>
    </div>
    <div class="full partial">
        <label>Foo</label>
        <input type="text"/>
    </div>
    <div class="full partial">
        <label>Foo</label>
        <input type="number"/>
    </div>
</div>

像这样：

<div class="wrapped">
    <div class="full">
        <label>This one</label>
        <input type="text"/>
    </div>
</div>

Answer 1

您可以使用:not() / :has()选择器的组合来选择所需的.full元素。迭代选定的元素，并使用方法.children() / .wrapAll()的组合包装子元素：

Example Here

$('.group .full:not(.partial):has(input[type="text"])').each(function () {
    $(this).children().wrapAll('<div class="wrapped"/>');
});

或者，您也可以使用以下内容：

Example Here

$('.group input[type="text"]').closest('.full:not(.partial)').each(function () {
    $(this).children().wrapAll('<div class="wrapped"/>');
});

我不确定哪种方法更快......可能是第一种方法。

只有包含文本输入的父元素的子元素才会包含它们

1 个答案: