Javascript最近的p標簽文本沒有選擇

Question

我試圖在用戶單擊共享按鈕時抓取我的標簽文本。 我的代碼在這里

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

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

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


    });

但是文本變量總是空的。 請有人幫忙。

Answer 1

閱讀文檔 。 .closest返回與選擇器匹配的最近的祖先元素。 所以，你的情況，最里面的p元素是你的容器a元素。

但你的a不在p所以沒有找到。

對於集合中的每個元素， 通過測試元素本身並遍歷DOM樹中的祖先來獲取與選擇器匹配的第一個元素。

---

在您的示例代碼中（ 但這是對您所擁有的一般結構的猜測 ），這將起作用

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

Answer 2

您需要找到最近的共同祖先（在本例中為.ui-content）然后找到p標簽，然后選擇找到的第一個，然后請求文本。

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