jquery - 从选择 <p> onclick 获取文本

Question

有一个链接 div，有两个 <p>部分，在链接上单击我只想获取第一个 <p> 的文本.

我的代码如下:-

HTML

<div id="link">
    <a href="#another-div" class="link">
        <div class="class-name">
            <p>Value I want to get</p>
            <p>This value I don't need</p>
        </div>
    </a>
</div>

输出div:-

<div id="another-div">
    <label id="output-val"></label>
</div>

jQuery

j$(document).ready(function() {
    j$("#link a").click(function() {
        var text = j$(this).text();
        j$("#output-val").text(text);
    } 
});

这将获取 <p> 的值的，我怎样才能只得到第一个？

Answer 1

倒数第二个}的脚本代码中缺少)}

更改您的代码，如下所示(使用find('p:first')):-

j$(document).ready(function() {
    j$("#link a").click(function(e) {
        e.preventDefault();
        var text = j$(this).find('p:first').text();//find first p text
        j$("#output-val").text(text);
    });//missing )  here 
});

工作示例:-

var j$ = $;
j$(document).ready(function() {
    j$("#link a").click(function(e) {
      e.preventDefault();
      var text = j$(this).find('p:first').text();
      j$("#output-val").text(text);
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="link">
    <a href="#another-div" class="link">
        <div class="class-name">
            <p>Value I want to get</p>
            <p>This value I don't need</p>
        </div>
    </a>
</div>

<div id="another-div">
    <label id="output-val"></label>
</div>

引用:- jQuery :first Selector