javascript - 查找相似的 HTML 部分

Question

我有以下(简化的)HTML 代码，并希望将其拆分为类似的部分:

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

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

<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);

这预设每个标签输入对都有一个共同的父元素，因此不适用于您的第一种情况。