CODEWITHSUNDEEP
javascriptjqueryhtml
Arun Kumaresh
Arun Kumaresh

Reputation: 6311

jquery how to get the parent text using chlid?

I need to get the text of the <p> tag that is in the parent div only and not from the child div.I have tried the following code which get all text in both parent and child div.

Note:I need to get the text parent p1 and parent p2 only

Downvoters plz mention the reason so that i cannot make that mistake in future

Html





<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <p>parent p1</p>
    <p>parent p2</p>
    <div id="sub">
    <p>child div</p>
    <button type ="button">click</button>
    </div>
    </div>


    <script type="text/javascript">
        $(document).ready(function(){
        $("button").click(function(){
    
              var a = $(this).parent("div").attr("id");
                
                console.log($("#"+a).parent("div").text());
    
    
                });
    });
    </script>

Upvotes: 3

Views: 2019

Answers (6)

Akairis
Akairis

Reputation: 415

This working correctly

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <p>parent p1</p>
    <p>parent p2</p>
    <div id="sub">
        <p>child div</p>
         <button type ="button">click</button>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
           var text = $(this).parent("div").parent().children('p').text();
           console.log(text);
        });
    });
</script>

Upvotes: 4

Bharat
Bharat

Reputation: 2464

you can try like this 

 $("button").click(function(){
                    alert($(this).parent('div').parent('div').children('p').text())
         })
<div>
    <p>parent p1</p>
    <p>parent p2</p>
    <div id="sub">
    <p>child div</p>
    <button type ="button">click</button>
    </div>
    </div><script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

Upvotes: 6

LF-DevJourney
LF-DevJourney

Reputation: 28559

this works for you, hope it helps.

parent().parent().children('p').text();

or

console.log($(this).parent().siblings('p').text())


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <p>parent p1</p>
    <p>parent p2</p>
    <div id="sub">
    <p>child div</p>
    <button type ="button">click</button>
    </div>
    </div>


    <script type="text/javascript">
        $(document).ready(function(){
          $("button").click(function(){
           console.log($(this).parent().parent().children('p').text())
console.log($(this).parent().siblings('p').text())
     })
    });
    </script>

Upvotes: 1

Sudharsan S
Sudharsan S

Reputation: 15393

It's not a child its a siblings for the button.

$("button").click(function(){
   console.log($(this).closest('div').parent().children('p').text()): // parent p1, parent p2
});

Otherwise you need to iterate the p tag and push into the array and join it.

Upvotes: 3

GiuServ
GiuServ

Reputation: 1235

So, since the question is to retrive parent p1 and p2 text, solution is:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>parent p1</p>
  <p>parent p2</p>
  <div id="sub">
    <p>child div</p>
    <button type="button">click</button>
  </div>
</div>


<script type="text/javascript">
  $(document).ready(function() {
    $("button").click(function() {

      $(this).parents("div:not(#sub)").find(">p").each(function(index,value){
        console.log("p " + (index+1) + " = " + $(this).text());
      });
    });
  });
</script>

Note that there are many ways.

First you can find the p required both in 

var p = $(this).parents("div:not(#sub)").children("p");

and

var p = $(this).parents("div:not(#sub)").find(">p");

Second, if you want to iterate for each p you can make an each cicle like in anwser

p.each(function(){
    console.log($(this).text());
})

otherwise you can get the full text with

p.text()

Upvotes: 2

B P
B P

Reputation: 153

I hope the below would work I have tested it

$("#" + a).parent("div").clone().children().remove('#'+ a).text();

Upvotes: 2

Related Questions