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が考え出したように、これは実際にテンプレート システムに使用されます。ユーザーはこのテンプレートで 1 つの行を定義し、その行が<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 に答える