Question

在链接点击上有一个包含两个<p>部分的链接div我只想获取第一个<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

Answer 2

您需要使用:first来获取任何代码的第一个元素。

＆＃13;

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

＆＃13;

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

＆＃13;

从选择<p> onclick

2 个答案: