Jqueryクリック後の前の要素の選択

Question

<div class="container"> 
<div class="well"> 
    <h2>Hurry Up!</h2> 
    <ul> 
    <li> 
    <a onclick="clicked()"></a> 
    </li> 
    <li> 
    <a onclick="clicked()"></a> 
    </li> 
    </ul> 
    </div> 
</div> 

上記は、私のHTML構文のサンプルです。私が達成したいのは、 "a"タグがクリックされたとき、 "h2"要素のテキストを探したいときです。

たとえば、「a」タグをクリックすると、「Hurry Up！」というテキストが表示されます。のh2はコンソールに表示する必要があります。

私はこれを試してみましたが、その作業はありません：

function clicked(){ 
     var title = $(this).find('h2').text(); 
     console.log(title); 
} 

そしてまた、この：コンソールで

function clicked(){ 
     var title = $(this).parentsUntil('.container').find('h2').text(); 
     console.log(title); 
} 

を、何も、唯一の空白行を表示されません。

私が追加したいのは、これと同じ構文が何度もあります。だから、h2のテキストは、それがクリックされたコンテナのものでなければなりません。そのため、私は 'this'を通して試しています。

Answer 1

は試してみてください。この

function clicked(element){ 
 
     var title = $(element).closest('div').find('h2').html(); 
 
     console.log(title); 
 
     alert(title); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
<div class="well"> 
 
    <h2>Hurry Up!</h2> 
 
    <ul> 
 
    <li> 
 
    <a onclick="clicked(this)" href="#">Click 1</a> 
 
    </li> 
 
    <li> 
 
    <a onclick="clicked(this)" href="#"> Click 2</a> 
 
    </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

これを試してみてください：

<div class="container"> 
<div class="well"> 
    <h2>Hurry Up!</h2> 
    <ul> 
    <li> 
    <a onclick="clicked(this)"></a> 
    </li> 
    <li> 
    <a onclick="clicked(this)"></a> 
    </li> 
    </ul> 
    </div> 
</div> 

function clicked(elem){ 
    var text = $(elem).closest('h2').text(); 
    // text contains Hurry Up! in it 
} 

Answer 3

function clicked(element) { 
 
    var title = $(element).closest('ul').prev('h2').text(); 
 
    console.log(title); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="well"> 
 
    <h2>Hurry Up!</h2> 
 
    <ul> 
 
     <li> 
 
     <a onclick="clicked(this)">clicked</a> 
 
     </li> 
 
     <li> 
 
     <a onclick="clicked(this)">clicked</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

使用.closest() ULは、あなたがモジュラー答えを探していない場合は、これを試すことができH2

Answer 4

を取得するために.prev()を使用するには：

function clicked(){ 
    var title = $(".well h2").text(); 
    console.log(title); 
    }