0

Twitter タイプのアプリ (Web サイト) を作成していますが、jQuery セレクターについて少し助けが必要です。

これは HTML 構造です。

<div class="delete_box">
</div>

<div class="report_box">
</div>

<div class="twit">
  <a class="report_link">report</a>
  <a class="delete_link">delete</a>
</div>

最初の 2 つの div は、つぶやきを削除して報告するためのポップアップです。3 番目の div は、実際のツイットがある場所です。両方のポップアップのスタイルは、表示なしに設定されています。この構造は、db に twtis がある限りループされます。

これは、表示する必要があるポップアップ ボックスを選択する jQuery コードです。

$(document).on('click', '.delete_link', function()  {
    var op_twit = $(this).parents('.twit').prevAll('.delete_box');
    popup(op_twit);
});

$(document).on('click', '.report_link', function()  {
    var op_twit = $(this).parents('.twit').prevAll('.report_box');
    popup(op_twit);
});

これに関する問題は、すべてのポップアップ ボックスを選択して表示することです。prevAll() ではなく prev() のみを実行すると、レポート リンクのみが機能し (report_box は twit の直前にあるため)、ポップアップが 1 つだけであるため、うまく機能します。示しています。しかし、prev() を配置すると、削除リンクが機能しません。

したがって、問題は、正確に前ではなく、1つ上にある前の要素をどのように選択できるかです。siblings() を試してみましたが、これは prevAll が delete_box クラスを持つすべての要素を選択するのと同じ問題です。

4

4 に答える 4

2

prevAllとの組み合わせを使用できますlast。

var op_twit = $(this).closest('.twit').prevAll('.delete_box').first();

すべての親を取得するのではなく、最初の親のみを取得したいと思うので、私もparentsに変更しました。closest

于 2013-09-11T18:28:53.023 に答える
1

他の人が述べたように、HTML 構造を少し修正する必要があります。最も簡単な方法は、各ツイットの周りにホルダー div を追加することです。

<div class="twit_hold">
    <div class="delete_box">Del Box</div>

    <div class="report_box">Rep Box</div>

    <div class="twit">
        <a href="#" class="report_link">report</a>
        <a href="#" class="delete_link">delete</a>
    </div>
</div>

次に、アンカーの親を参照し、.twit_holdそこから表示するボックスを見つけます。それはDOMの上下ですが、この方法では構造の順序はそれほど重要ではありません（twit, report_box, delete_boxまたはreport_box, delete_box, twit または他の配置を持つことができます.

$(document).on('click', '.delete_link', function()  {
    var t = $(this).parents('.twit_hold').find('.delete_box');
    // do stuff with the delete_box
}

http://jsfiddle.net/daCrosby/srEDr/1/

于 2013-09-11T18:55:16.800 に答える
0

あなたが試すことができます

var op_twit = $(this).parents('.twit').prev().prev();

ただし、HTML 構造を再検討することをお勧めします。

編集

複数のツイートがどのように HTML コードに含まれているかに関する HTML 構造が含まれていないため、それらは兄弟であると想定します。したがって、私の仮定によると、コードは次のようになります。私の仮定が間違っている場合は修正してください。

<div class="delete_box"></div>
<div class="report_box"></div>
<div class="twit">
    <a class="report_link">report</a>
    <a class="delete_link">delete</a>
</div>

<div class="delete_box"></div>
<div class="report_box"></div>
<div class="twit">
    <a class="report_link">report</a>
    <a class="delete_link">delete</a>
</div>

あなたはそれを次のようにする必要があります。これにより、すべての JS/CSS/jQuery を「つぶやく」ようにスコープできるため、簡単かつ高速になります。

<div class="tweet">
    <div class="delete_box"></div>
    <div class="report_box"></div>

    <a class="report_link">report</a>
    <a class="delete_link">delete</a>
</div>
<div class="tweet">
    <div class="delete_box"></div>
    <div class="report_box"></div>

    <a class="report_link">report</a>
    <a class="delete_link">delete</a>
</div>

さらに、ツイートごとに個別の削除/レポート div が本当に必要かどうかもわかりません。繰り返しますが、元の要件が何であるかわからないので、それは確認オーバーレイであり、私の意見では再利用できると想定しています。

于 2013-09-11T18:35:47.433 に答える