Question

我正在尝试在用户点击分享按钮时抓取我的p标签文本。我的代码在这里

<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

阅读docs。 .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();
    });

＆＃13;

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

＆＃13;

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

＆＃13;

Javascript最近的p标签文本没有选择

2 个答案: