Javascript Closest p tag text not selecting

Question

I am trying to grab my p tag text when user click share button. My code Here

<div data-role="main" class="ui-content">
            <div class="ui-body ui-body-a ui-corner-all" style="width:90%;height:300px;overflow-y: scroll;">
                <label>- Title</label>          
             <p class="copy">Demo text
                <br />Demo text
                <br />Demo text,
                <br />Demo text.
                </p>
            </div>
                <div class="ui-grid-a" >
                    <div class="ui-block-a" style="width:44%;"><a class="ui-shadow ui-btn ui-corner-all" data-clipboard-action="copy" data-clipboard-target="p">12 Likes</a></div>
                    <div class="ui-block-b" style="width:44%;float:right;"><a href="#single-kobita" class="ui-shadow ui-btn ui-corner-all share-it">Share</a></div>
                </div>
                <div class="ui-grid-a" >
                    <div class="ui-block-a" style="width:44%;"><a class="ui-shadow ui-btn ui-corner-all">Prev</a></div>
                    <div class="ui-block-b" style="width:44%;float:right;"><a href="#1400-shal" class="ui-shadow ui-btn ui-corner-all">Next</a></div>
                </div>
        </div>

JavaScript Code

 $("a.share-it").click(function(){          

        var text = $(this).closest( "p" ).text();


    });

But text variable always empty. Please anyone help for this.

Answer 1

Read the docs . The .closest returns the closest ancestor element that matches the selector. So, in your case, the innermost p element that is a container to your a element.

But your a is not inside a p so nothing is found.

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree .

---

In your example code ( but this is a guess to the general structure you have ) this would work

$("a.share-it").click(function(){          
    var text = $(this).closest(".ui-content").find('p').text();
});

Answer 2

You need to find the closest common ancestor(in this case .ui-content) Then find the p tag, then select the first one that was found, then request the text.

 $("a.share-it").click(function(){          
        var text = $(this).closest( ".ui-content" ).find('p').first().text();
    });

  $("a.share-it").click(function(){ var text = $(this).closest( ".ui-content" ).find('p').first().text(); window.alert(text); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-role="main" class="ui-content"> <div class="ui-body ui-body-a ui-corner-all" style="width:90%;height:300px;overflow-y: scroll;"> <label>- Title</label> <p class="copy">Demo text <br />Demo text <br />Demo text, <br />Demo text. </p> </div> <div class="ui-grid-a" > <div class="ui-block-a" style="width:44%;"><a class="ui-shadow ui-btn ui-corner-all" data-clipboard-action="copy" data-clipboard-target="p">12 Likes</a></div> <div class="ui-block-b" style="width:44%;float:right;"><a href="#single-kobita" class="ui-shadow ui-btn ui-corner-all share-it">Share</a></div> </div> <div class="ui-grid-a" > <div class="ui-block-a" style="width:44%;"><a class="ui-shadow ui-btn ui-corner-all">Prev</a></div> <div class="ui-block-b" style="width:44%;float:right;"><a href="#1400-shal" class="ui-shadow ui-btn ui-corner-all">Next</a></div> </div> </div>