2

私は WordPress テーマを作成していて、正確に必要な新しいコンテンツを DOM に挿入するのに少し苦労しました。

私の問題を単純化するために、私の目標を示すためのすべてのクラフトなしでこの例をまとめようとしました。

次の点を考慮してください。

最初のページの html コンテンツ

<ul class="ordered-list">
    <li class="list-divider">
        First Result Page <span>A counter</span>
    </li>
    <li class="list-item">
        Result 1
    </li>
    <li class="list-item">
        Result 2
    </li>
</ul>
<div id="load-more">
    <a href="#">Load More</a>
</div>

次のページの html コンテンツ

<ul class="ordered-list">
    <li class="list-divider">
        Second Result Page <span>A counter</span>
    </li>
    <li class="list-item">
        Result 3
    </li>
    <li class="list-item">
        Result 4
    </li>
</ul>
<div id="load-more">
    <a href="#">Load More</a>
</div>

jQuery

$('#load-more a').click(function() {
    $.get('http://example.com/nextpage', function(data){
         $(".ordered-list").append(
             $(data).find('.ordered-list').html() // get the li's from data
         ); // append the new li's to the First page
    });

上記で、新しいリスト項目を順序なしリストに正常に追加できます (上記の例が正しく貼り付けられている場合)。

私がやろうとしているのは<li class="list-divider">、受信したデータから削除し、アイテム$.get()のみを追加することです。<li class="list-item">

上記の要件を達成しようとする非機能コードの例:

// get the li's from data but get rid of li.list-divider
$(data).find('.ordered-list').remove('.list-divider').html();

何かが欠けていると思いますが、これにはおそらく非常に簡単な解決策があります。

前もって感謝します ：）

4

2 に答える 2

4

HTML から間違ったものを削除しようとするのではなく、正しい jQuery 要素を追加する必要があるだけです。

$.get('http://example.com/nextpage', function(data){
     $(".ordered-list").append(
         $(data).find('li.list-item') // append the actual li elements themselves
     ); 
});

例 - http://jsfiddle.net/ccGes/

于 2012-09-12T10:56:39.527 に答える
1 
$(data).find('.list-divider').remove();

これにより、クラス list-divider を持つ li が応答から削除されます。

于 2012-09-12T10:58:08.627 に答える