Javascript Am nächsten p-Tag-Text nicht auswählen

Question

Ich versuche, p-Tag-Text zu greifen, wenn Benutzer auf die Schaltfläche zum Teilen klicken. Hier ist mein Code

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


    }); 

Aber Textvariable immer leer. Bitte irgendjemanden Hilfe dafür.

Answer 1

Lesen Sie die docs. Das .closest gibt das nächste Element Vorfahr zurück, das mit dem Selektor übereinstimmt. Also, in Ihrem Fall, das innerste p Element, das ein Container zu Ihrem a Element ist.

Aber Ihre a ist nicht in einem p, so dass nichts gefunden wird.

für jedes Element in dem Satz, um das erste Element erhalten, das den Selektor einstimmt durch das Element selbst zu testen und im DOM-Baum durch seine Vorfahren durchquert werden.

---

In Ihrem Beispiel-Code (aber das ist eine Vermutung auf die allgemeine Struktur, die Sie haben) diese funktionieren würde

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

Answer 2

Sie müssen die nächsten gemeinsamen Vorfahren finden (in diesem Fall .ui-content) Suchen Sie dann das p-Tag, wählen Sie dann das erste gefundene aus und fordern Sie den Text an.

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