jQuery获取div中的所有文本

Question

这是我的代码

<div class="formItem">
    <asp:Label ID="Label1" runat="server" Text="Label">Test Label:</asp:Label>
    <asp:TextBox ID="TextBox1" runat="server">Test Text</asp:TextBox>
</div>

如果我使用jQuery

alert($('.formItem').text())

结果将是“测试标签：”

如何将结果作为“测试标签：测试文本”

Answer 1

使用以下内容，

alert($('.formItem').text() + ":" + $('.formItem #TextBox1').val()');

Answer 2

解释

我可以看到你在想什么。

alert($('.formItem').text())

事实上，这会打印出课程.formItem中的所有文字。然而，问题是输入（文本框）没有文本，它只有一个值 或者，为了更准确，它有一个名为value的属性。在您的ASP示例中并不明显。

通常，html看起来像这样

<div class="formItem">
    <label id="Label1" for="TextBox1">Test Label:</label>
    <input id="TextBox1" type='text' value='Test Text' />
</div>

在JQuery中，要检索value属性，有一个名为.val()的速记函数，相当于.attr("value")

---

解决方案

Here's a JSFiddle example.

一种简单的方法是分别处理元素，然后连接字符串。

alert( $("#Label1").text() + " " + $("#TextBox1").val() );

这会输出"Test Label: Test Text"

---

替代解决方案

Here's a JSFiddle example.

为了演示如何使用父容器执行此操作，我将使用函数.children()和.each()

var sResult = "";
$('.formItem').children().each(function(){
    var sOutput = $(this).text();

    //check if the text is empty for the child, then get the value instead
    if(sOutput == "") 
        sOutput = $(this).val();

    //if the text isn't empty, add it to the result string
    if(sOutput != "")
        sResult += " "+sOutput;
});

alert(sResult);

这也会输出"Test Label: Test Text"

请注意，此示例不需要知道标签和输入元素的名称，这也会影响所有.formItem个容器。

Check this example out.

Answer 3

asp：TextBox是一个输入，您可以通过元素的val（）方法检索它。

这样的事情：

alert($('.formItem').text() + $('.formItem').find("input[text]").val());

Answer 4

您的代码确实显示了整个文字：

http://jsfiddle.net/N3bM9/1/

注意我关闭了div的ASP标签。

Answer 5

$('.formItem label').text() + $('#TextBox1').val();