1

私は次のようにネストされたdiv構造を持っています：

<div id="outer">
  <h3 id="groupa">group a</h3>
  <div id="inner1">
  <div id="inner2">
  <h3 id="groupb">group b</h3>
  <div id="inner3">
  <div id="inner4">
</div>

また、ユーザーが内部div（内部？）のいずれかをクリックすると、クリックハンダーがグループのID（その上の最も近いh3）と内部div自体のIDを渡すことになっています。したがって、たとえば、最後の内部divをクリックすると、パラメータ「groupb」と「inner4」を持つ関数が呼び出されます。

1.クリックハンドラーを内部のみに関連付けるjQueryselectを作成しますか？divs、および2.ハンドラーにこれらの2つのパラメーターを使用して関数を呼び出させます。何かのようなもの：

$('#outer div').click(function () {
  myfunction(this.h3above.id,this.id);
});

誰かが上記の3行のコードを手伝って正しく選択し、必要な2つのIDを取得できますか？

4

3 に答える 3

3

jQueryのprevAll()関数を使用して、前のh3要素を選択できます。

$('#outer div').click(function () {
  var h3_id = $(this).prevAll('h3').attr("id");
  var id = $(this).attr("id");
  myfunction(h3_id, id);
});

このprevAll関数は、「一致した要素のセット内の各要素の先行するすべての兄弟、オプションでセレクターによってフィルター処理された」を取得します。（jQuery API）

ただし、上記のコメント投稿者が述べたようidに、IDは有効なHTMLに対して一意であると想定されているため、内部部門の'をクラスに変更する必要があります。

于 2013-03-08T04:12:01.133 に答える
0 
$('#outer').on('click', 'div[id^=inner]', function(e){
    var h3_id = $(this).prevAll('h3').attr("id");
    var id = $(this).attr("id");
    myfunction(h3_id, id);
})

デモ：フィドル

于 2013-03-08T04:15:02.387 に答える
0

2人のコメント投稿者が指摘したように、一意のIDが必要です。

IDを取得する方法についてのjsFiddleがここにあります。

クリック可能な要素にクラスを追加し、それにクリックイベントをバインドしました。h3が'inner'divと同じレベルにあると仮定すると、.prev関数を使用してh3を検索し、そのIDをフェッチします。

とはいえ、ベストプラクティスは、内部要素をより適切にグループ化し、一意のIDを使用することです。複数の要素が同じクラスを持つことはできますが、IDを持つことはできません。

わずかに変更されたHTML：

    <div id="outer">
  <h3 id="groupa">group a</h3>
  <div id="inner1" class="clickable">Click here</div>
  <div id="inner2" class="clickable">Click here</div>
  <h3 id="groupb">group b</h3>
      <div id="inner3" class="clickable">Click here</div>
      <div id="inner4" class="clickable">Click here</div>
</div>

<br/><br/>
Your Results:
<br/><br/>
  <div class="output1"></div><!--This inner's closest h3-->
  <div class="output2"></div> <!--This inner ID-->

Javascript：

$('.clickable').click(function(){
    //.attr fetches the attribute value
    $('.output1').text($(this).attr('id')); 
    $('.output2').text($(this).prev('h3').attr('id'));

    /*
    $(this).attr('id')  -- this contains the clicked element id
    $(this).prev('h3').attr('id') -- this contains the closest h3's id

    you could store them in a variable and then call your function with it.

    */
});
于 2013-03-08T04:16:07.813 に答える