1

我有以下（简化的）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 部分看起来相似，然后拆分它们以获取模板。

4

1 回答 1

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

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

于 2012-12-13T11:11:28.573 回答