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>