親からjQueryでdiffirent要素を選択

Question

私は開発を学び、jQueryで質問があります。私はここにいくつかのコードを持っている：

<div id="name_1"> 
    <p class="my_p">I need this value too</p> 
    <a href="#" class="my_link">Click me for get value of <p> tag</a> 
</div> 

はい、私の質問は、私のリンクにあります。私は、リンクをクリックした後、どのように私はそれだけの親に<p>タグの値を得ることができますか？私はこのようないくつかのコードをしようと試みたが、彼らは動作しませんでした。

$(document).ready(function(){ 
    $('.my_link').click(function(){ 
     var get_value = $('.my_p').parent().html(); //Returned all html codes in <div> 
     var get_value = $('.my_p').parent().text(); //Returned all texts in <div> 
    }); 
}); 

Answer 1

使用するクラスのテキストを取得するために見つける（）メソッド親からの.my_p

$(document).ready(function(){ 
$('.my_link').click(function(){ 
    var get_value = $(this).parent().find('.my_p').text(); 
    }); 
}); 

Answer 2

あなたの問題は.my_pセレクタは、そのクラスですべての要素を返すということです。クリックされた.my_linkに関連するものを見つけるには、thisキーワードを使用して、イベントを発生させた要素とjQueryのDOMトラバーサルメソッドを参照する必要があります。

a要素のテキストに<p>のHTMLエンティティを使用する必要があります。そうでない場合は、HTMLとして解釈され、レイアウトが解除されます。親タグ内の要素を取得するための

$('.my_link').click(function() { 
 
    var get_value = $(this).closest('div').find('.my_p').text(); 
 
    console.log(get_value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="name_1"> 
 
    <p class="my_p">I need this value too #1</p> 
 
    <a href="#" class="my_link">Click me for get value of &lt;p&gt; tag</a> 
 
</div> 
 
<div id="name_2"> 
 
    <p class="my_p">I need this value too #2</p> 
 
    <a href="#" class="my_link">Click me for get value of &lt;p&gt; tag</a> 
 
</div> 
 
<div id="name_3"> 
 
    <p class="my_p">I need this value too #3</p> 
 
    <a href="#" class="my_link">Click me for get value of &lt;p&gt; tag</a> 
 
</div>

Answer 3

使用find()方法：これを試してみてください。または、クリックされた要素の直前の兄弟であるので、prev()メソッドを使用します。

$(document).ready(function() { 
 
    $('.my_link').click(function() { 
 
    
 
    // get parent and get first p tag inside 
 
    var get_value = $(this).parent().find('.my_p').text(); 
 
    
 
    // or using prev 
 
    var get_value1 = $(this).prev('.my_p').text(); 
 
    
 
    console.log(get_value, get_value1); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="name_1"> 
 
    <p class="my_p">I need this value too</p> 
 
    <a href="#" class="my_link">Click me for get value of &lt;p&gt; tag</a> 
 
</div>

Answer 4

あなたはこれを達成するためにprev() jqueryの機能を使用することができます。

$(document).ready(function(){ 
 
    $('.my_link').click(function(){ 
 
     var get_value = $(this).prev('p').html(); 
 
     console.log(get_value); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="name_1"> 
 
    <p class="my_p">I need this value too</p> 
 
    <a href="#" class="my_link">Click me for get value of <p> tag</a> 
 
</div>

Answer 5

$('.my_link').click(function(){ 
    var p_text = $(this).parent().find('.my_p').html(); 
});