1

順序付けされていないリストがありますが、その中にはさまざまなカテゴリのヘッダーがあります。

<ul>
    <h2>header1</h2>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <h2>header2</h2>
    <li>...</li>
</ul>

それらをループして日付順に並べようとしていますが、ヘッダーがそれを破棄しています。

私は以下を使用してループしています：

var list = $('#articleList');
list.children("li").each(function () {
    ...
}

ループ内でこれを使用して、前のループを選択しています。

var prev = $(this).prev("li");

何らかの理由で、ヘッダーの前のリストアイテムではなく、ヘッダーの後のリストアイテムにいる場合、prevはヘッダーを選択します。したがって、私の並べ替えはヘッダー内で正しくなりますが、セクションだけでなく、すべてを並べ替える必要があります。

4

4 に答える 4

4

これは、HTMLの解析と関係があります。仕様により、リストには<li>要素のみを含めることができ、それ以外は含めることができません。そのため、ブラウザは別のDOMを構築します。たとえば、見出しをリストアイテムにラップします（HTML5は、無効なHTMLを正確に処理する方法を指定します）。DOMインスペクターを使用して、実際のDOMツリーを表示します（コンテキストメニュー->要素の検査）。

于 2012-08-02T18:43:45.403 に答える
1

次のことを試してください。

var prev = $(this).prevUntil('li').first();
于 2012-08-02T18:42:47.043 に答える
1

不適切なHTMLがjQueryを台無しにしているのではないかと思います。prev()方法。ul要素は子として要素を持つべきではありませんh2。

代わりに、h2要素を要素の子にliして、HTMLを次のようにする必要があります。

<ul id="articleList">
    <li class="header"><h2>header1</h2></li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li class="header"><h2>header2</h2></li>
    <li>...</li>
</ul>

li要素を含む各要素にh2は「ヘッダー」のクラスがあることに注意してください。li次に、次のようにヘッダー以外の各要素をループできます。

var list = $('#articleList');
list.children("li:not(.header)").each(function () {
    ...
}

そして、次のように前の非ヘッダーli要素をフェッチします。

var prev = $(this).prev("li:not(.header)");
于 2012-08-02T18:48:15.360 に答える
1

これはあなたのhtmlで動作します：

    var prevLI = $('ul li:last').prevAll('li:first');
    $('body').append('<h2>Selected: '+ prevLI.text() + '</h2>' );

このフィドルで試してみてください：http：//jsfiddle.net/guumaster/4Ax6v/1/

于 2012-08-03T08:22:08.760 に答える