Question

我有以下（简化的）HTML代码，并希望将其拆分为类似的部分：

<input id="checkbox1"><label><br>
<input id="checkbox2"><label><br>
<input id="checkbox3"><label><br>

此结果应为<input><label><br>。但问题是，我需要一个防弹解决方案，例如从以下HTML返回<div><p><input></p><p><label></p></div>：

<div><p><input id="checkbox1"></p><p><label></p></div>
<div><p><input id="checkbox2"></p><p><label></p></div>
<div><p><input id="checkbox3"></p><p><label></p></div>

知道如何在JavaScript / jQuery中找到这样的伪父元素吗？

像Rory McCrossan一样，这确实用于模板系统。用户在此模板中定义了一行，如<input id="checkbox1"><label><br>，然后在屏幕上显示x次。我在JS代码中需要这个模板，但遗憾的是没有直接访问用户模板，所以我的想法是弄清楚哪些HTML部分看起来相似，然后将它们拆分以获得模板。

Answer 1

作为部分解决方案，您可以考虑为输入标签对识别最接近的共同祖先，并将其用作重复元素：

var collection = $('');
$('input').each(function() {
    collection = collection
        .add($(this)
             .parents(':has(label)')
             .filter(function() {
                 return $(this).siblings().length == $(this).siblings(this.tagName).length;
             }));
});
console.log(collection);

这预先假定每个标签输入对具有一个共同的父元素，因此不适用于您的第一个案例。

查找类似的HTML部分

1 个答案: