Getting value of a particular element within a particular div using jQuery

Question

In the markup, i have several divs with same id and inside those divs there are paragraphs and buttons. Now when a button is clicked, i want to get the value of a corresponding paragraph tag under the same div as that particular button. How can i do this with jQuery? The markup is as followed:

<div class="col-sm-5 narrow">
    <p id="title">Jhon123</p>
    <p id="text">This is the status of jhon</p>
    <p>posted at 12:30pm GMT6+</p>
    <form class="form-inline">
        <input type="text" class="form-control" id="reply" placeholder="Type and enter to reply">
        <button type="button"  class="btn btn-default" id="repost">Re-Tweet</button>

    </form>
</div>

When the button with the id #repost is clicked, i want to access the html inside the p tag with the id #text. I tried something like this:

$('#retweet').click(function(e){
    e.stopPropagation();
    var text = $(this).parent("div").closest('#text');
    alert("some retweet button has been pressed which has the text:"+text);
});

Please post the jQuery/JS you tried. Oh, and IDs must be unique. — j08691
– j08691, Commented Nov 11, 2015 at 3:28
i have several divs with same id Then change the ids into classes. Ids should be unique. — Shashank
– Shashank, Commented Nov 11, 2015 at 3:32
what i meant is, several divs are generated in an iterative way while looping through and array of objects. so i cant just do a generic jquery to select some text inside a paragraph with #text id. — amin365
– amin365, Commented Nov 11, 2015 at 3:34
It doesn't really matter how the markup is generated. id values should be unique on the whole page. Use a class instead if you want to have the same one for multiple elements. — GregL
– GregL, Commented Nov 11, 2015 at 3:35

GregL · Accepted Answer · 2015-11-11 03:33:09Z

3

You can use the jQuery .closest() function to get the containing <div> and then find the <p> tag you want inside it:

$('#repost').on('click', function () {
    var text = $(this).closest('div[class^=col]').find('#text').html();
    console.log(text);
});

The div[class^=col] selector means "find the closest div tag with a class starting with col". This allows you to use the other bootstrap column classes as well and have it still work.

answered Nov 11, 2015 at 3:33

GregL

38.2k8 gold badges65 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daveo · Accepted Answer · 2015-11-11 04:14:38Z

1

$('#repost').click(function(){
    console.log($(this).closest('div').find('#text').html());
  });

See demo http://jsbin.com/wojupoyosa/1/edit?html,js,console,output

and as comments suggest you IDs should be unique per page so you should use a class or something else instead.

edited Nov 11, 2015 at 4:14

answered Nov 11, 2015 at 3:34

Daveo

20k10 gold badges50 silver badges73 bronze badges

Comments

sagarthapa · Accepted Answer · 2015-11-11 03:35:20Z

0

$( "#text" ).text() will give you the value inside P tag. So your code will look something like:

$('#repost').click(function(){
   $( "#text" ).text() // save it to wherever you want
});

answered Nov 11, 2015 at 3:35

sagarthapa

1761 silver badge12 bronze badges

Comments

Jeremy R · Accepted Answer · 2015-11-11 04:09:54Z

0

As a side note it is generally frowned upon to have css id's that are not unique - shared identifiers should use a class.

answered Nov 11, 2015 at 4:09

Jeremy R

133 bronze badges

Comments

PeterKA · Accepted Answer · 2015-11-11 17:17:52Z

If you change all your ids into classes as shown in the demo below, then the following code should work fine. Also, you do not need the form element.

$('.repost').click(function(){
    var text = $(this).closest('div').find('.text').text();
alert("some retweet button has been pressed which has the text: " + text);
});

$(function() {
    $('.repost').click(function(){
        var text = $(this).closest('div').find('.text').text();
    alert("some retweet button has been pressed which has the text: " + text);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-5 narrow">
    <p class="title">Jhon123</p>
    <p class="text">This is the status of jhon</p>
    <p>posted at 12:30pm GMT6+</p>
    <form class="form-inline">
        <input type="text" class="form-control reply" placeholder="Type and enter to reply">
        <button type="button"  class="btn btn-default repost">Re-Tweet</button>
    </form>
</div>
<div class="col-sm-5 narrow">
    <p class="title">Mary123</p>
    <p class="text">This is the status of mary</p>
    <p>posted at 12:35pm GMT6+</p>
    <form class="form-inline">
        <input type="text" class="form-control reply" placeholder="Type and enter to reply">
        <button type="button"  class="btn btn-default repost">Re-Tweet</button>
    </form>
</div>

Collectives™ on Stack Overflow

Getting value of a particular element within a particular div using jQuery

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related