CODEWITHSUNDEEP
jquery
Văn Cao Trần
Văn Cao Trần

Reputation: 117

Select different elements from parent by jQuery

I am learning about developing, and i have a question with jQuery. I have some code here:

<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>

Yes, my question is in my link: How can i get value of <p> tag only in it's parent after i clicked the link? I tryed some code like this, but they were not work:

$(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>
    });
});

Upvotes: 1

Views: 55

Answers (5)

Pranav C Balan
Pranav C Balan

Reputation: 115282

Use find() method to get the element inside the parent tag. Or use prev() method since its sibling just before the clicked element.

$(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>

Upvotes: 0

Osama
Osama

Reputation: 3030

Use find() method to get the class text .my_p from parent 

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

Upvotes: 1

Jordhan Saez Miranda
Jordhan Saez Miranda

Reputation: 69

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

Upvotes: 2

Ankit Agarwal
Ankit Agarwal

Reputation: 30729

You can use the prev() jquery function to achieve this:

$(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>

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337713

Your issue is that the .my_p selector will return all the elements with that class. To find the one related to the clicked .my_link you need to use the this keyword to reference the element that raised the event, along with jQuery's DOM traversal methods.

Also note that you need to use HTML entities for the <p> in the text of the a element, otherwise it is interpreted as HTML, and will break the layout. Try this:

$('.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>

Upvotes: 2

Related Questions