0

ドロップダウンメニューに取り組んでおり、既存のhtmlマークアップをJQueryで変更して、デザインに合わせる必要があります。

簡単な例を次に示します。divに複数の「li」を含むすべての「ul」をラップします（同じdiv内で、ULごとに1つのdivではありません）。

<ul>
    <li>foo</li>
</ul>
<ul>
    <li>foo</li>
    <li>foo</li>
</ul>
<ul>
    <li>foo</li>
    <li>foo</li>
</ul>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script>
my_selection = [];
i = 0;
// find all ul's that have more than one li
$("ul").each(function(){
    if($(this).find("li").length > 1){
        // add this to my_selection
        my_selection[i] = $(this);
        i++;
    } // if
}); // each

// wrap my_selection in div tags
$(my_selection).wrapAll(document.createElement("div"));
</script>

上記のコードはこのfirebugエラーを与えます：

「階層内の指定されたポイントにノードを挿入できません」コード：「3」

どうすればそれを機能させることができますか？

4

6 に答える 6

4

これは、はるかにクリーンなアプローチになります。

$('ul:has(li)').wrap('<div></div>');

まず、ノードを作成する必要はありません。ラッピング文字列をjQueryに提供するだけです。次に、:hasこのインスタンスでセレクターを使用して、例の機能を削減しeachます。最後に（これは目的の機能によって異なります）、wrapの代わりに使用することをお勧めしますwrapAll。

編集：別のオプションは、逆からアプローチすることです。<li>タグを取得してから、<ul>親を取得します。

$('li:not(:only-child)').parent().filter('ul').wrap('<div></div>');
于 2009-12-07T19:32:23.207 に答える
1

これはちょっとしたハックです。

<script>
jQuery( function() {
    my_selection = [];

    i = 0;
    n = 0;
    jQuery( 'ul' ).each( function() {
        var ul = jQuery( this );
        if ( ul.children().length > 1 ) {
            my_selection[n++] = 'ul:eq(' + i + ')';
        }
        ++i;
    } );

    jQuery( my_selection.join( ',' ) ).wrapAll( document.createElement( 'div' ) );
} );
</script>
于 2009-12-07T21:31:53.590 に答える
0

コードにバグがあり、LIをDIVでラップしようとしています。

<script>
my_selection = [];
i = 0;
// find all ul's that have more than one li
$("ul").each(function() {
    var $ul = $(this);
    if ($ul.find("li").length > 1){
        // add this to my_selection
        my_selection[i] = $ul;
        i++;
    } // if
});

// wrap my_selection in div tags
$(my_selection).wrap(document.createElement("div"));
</script>
于 2009-12-07T18:59:02.970 に答える
0

jQueryが配列をセレクターとして使用できるかどうかはわかりません。では$(my_selection)、my_selectionはjQueryオブジェクトではなく、オブジェクトの配列です。を使用して、最初にjQueryオブジェクトを生成してみることができますvar my_selection = $(''); ... my_selection.add($(this));。

また、.wrapAll()メソッドを使用すると、次を使用できます.wrapAll('<div></div>');。

于 2009-12-07T19:01:50.843 に答える
0

この質問に答えたとき、私は少し忙しかったです、すべての問題をお詫びします。以下は問題を正しく解決します。

<script type="text/javascript">
jQuery( function() {
    jQuery( 'ul' ).find( 'li:eq(1)' ).parent().wrapAll( '<div></div>' );
} );
</script>

編集：li：gt（0）をli：eq（1）に変更しました。どちらも機能しますが、どちらかがより理にかなっています。

それは単純で、すべてのulとその子を通過し、2番目の子を取得しようとします。2番目の子が見つかった場合は、その親に戻ってwrapAllメソッドに追加します。

編集：投稿を8回以上編集すると、コミュニティWikiになります。興味深いものです。

于 2009-12-07T19:04:53.513 に答える
0

これらはすべて素晴らしい答えです。しかし、スクリプトがa内$(document).ready(function(){...})になく、ready関数でラップされていない他のコードでこのエラーがまだ存在することを確認したようです。

試してみたところ、Williamのコードが機能することがわかりました（彼に+1）が、OCDのおかげで少しクリーンアップしました

$(document).ready(function(){
 my_selection = [];
 $('ul').each(function(i){
  if ($(this).find('li').length > 1 ){
   my_selection.push(['ul:eq(' + i + ')']);
  }
 });
 $( my_selection.join(',')).wrapAll('<div class="wrapper"></div>');
})
于 2009-12-07T22:38:07.260 に答える