0

私は制御できないフレームワークの上でコーディングしているため、生成されるものの制限を回避する必要があります。

jquery UI アコーディオンを実行しようとしていますが、1 つだけでなく、ヘッダーに続く 2 つの要素を含めるにはアコーディオンが必要です。

たとえば、吐き出されるコードは次のとおりです (途中の束が削除されています)。

<h2>HEADER</h2>
<div>ITEM DESCRIPTION</div> 
<fieldset>
    <legend>Prices</legend>
    <div class="prices">
        <div class="productline" ><label>Price:</label>
                    <div  class="amount">$97.50</div></div>

    </div>
</fieldset>

すべてを単一のアコーディオン項目に入れる必要がありますが、現時点では、アコーディオンは h2 をヘッダーとして使用し、説明を含む div をアコーディオンのコンテンツとして使用し、その後のフィールドセットはアコーディオンの外に残されています。両方を div でラップするように生成されるコードを制御できないため、アコーディオンに、ヘッダーの後に 1 つではなく 2 つの項目を使用するように指示する方法はありますか?

私が使用しているjqueryは次のとおりです。

$(function() {
    $( ".productindex" ).accordion({
        active: false,
        collapsible: true,
        autoHeight: true,
        header: 'li>form>h2'
    });
});

さらに複雑なことに、一部のアイテムには説明がないため、フィールドセットが存在しない可能性がある前にスクリプトが最初の div に対応できれば、それは素晴らしいことですが、最悪の場合、すべてのアイテムに説明があることを確認できます。

助けてくれてありがとう！

4

1 に答える 1

2

私の最初のコメントによると、アコーディオン機能が機能するためには、「アコーディオンコンテンツ」である必要があるすべてのものを取得し、適切な要素にまとめることができます。

これらの要素を取得するために使用する最適なセレクターを決定するには、HTMLの周囲の構造を知る必要があります。divの代わりに変更できないマークアップを除いて、構造がjQueryUIサイトのデモにいくらか似ていると想像してみましょう。

<h2>HEADER</h2>
<div>ITEM DESCRIPTION</div> 
<fieldset>
    <legend>Prices</legend>
    <div class="prices">
        <div class="productline" >
            <label>Price:</label>
               <div  class="amount">$97.50</div>
        </div>
    </div>
</fieldset>

<h2>HEADER</h2>
// whoops, no description!
<fieldset>
    <legend>Prices</legend>
    <div class="prices">
        <div class="productline" >
            <label>Price:</label>
               <div  class="amount">$105.50</div>
        </div>
    </div>
</fieldset>

h2ノードを選択のエントリポイントとして使用できます。本当にやりたいことは、次まで利用可能なすべてのものを選択することです（ DOMツリーのそのブランチにh2それ以上ない場合も終了します）。h2この種の選択の性質上、アイテムの説明やその他の要素があるかどうかは関係ありません。次に、見つかったすべての要素の周りに新しいラッパーを追加します。

これが最もよく因数分解されたコードであるかどうかはわかりませんが（人々は一般的に使用する.each()のが好きではありませんが、ここで便利だと思います）、私が思いついたのは次のとおりです。

var headers = $('h2');
headers.each( function() {
  var toWrap = $(this).nextUntil('h2');
  toWrap.wrapAll('<div class="wrapped" />');
});

jQuery UIのドキュメントから判断すると、ラッピングdivにクラスは必要ありません。このjsFiddleデモンストレーションを容易にするためにクラスを1つ含めました。

デモ： http： //jsfiddle.net/StUWc/1/

徹底するために、wrapAll関数の後、DOMは次のマークアップで表すことができるものになります。

<h2>HEADER</h2>
<div class="wrapped">
  <fieldset>
    <legend>Prices</legend>
    <div class="prices">
        <div class="productline" >
            <label>Price:</label>
               <div  class="amount">$97.50</div>
        </div>
    </div>
  </fieldset>
</div>

<h2>HEADER</h2>
<div class="wrapped">
  <fieldset>
    <legend>Prices</legend>
    <div class="prices">
        <div class="productline" >
            <label>Price:</label>
               <div  class="amount">$105.50</div>
        </div>
    </div>
  </fieldset>
</div>
于 2012-07-05T05:34:30.960 に答える