无法获取后续 <p> 标记的 .text()答案

【问题标题】：Unable to fetch .text() of subsequent <p> tags无法获取后续 <p> 标记的 .text()
【发布时间】：2015-02-21 01:58:19
【问题描述】：

我在解析text() 标签的text() 属性时遇到了一点麻烦。我正在基于 Web 的跨平台应用程序（虚拟商店）中实现一个简单的搜索栏，它将查看 Dom 并获取匹配的字符串作为结果（用户键入的搜索栏场景品牌/衬衫/笔等的名称，他/她会收到匹配的结果）。

我正在制作一个原型，只是为了确保基本结构能够滚动......因此，我使用了一堆 <p> 标签作为 DOM 元素并使用正则表达式对其应用搜索操作.那工作正常，但奇怪的是我无法获得 .text() 的属性

一一标记，而不是我得到所有 p 文本的内联文本作为输出 ...

（“vis”类适用于使文本不可见，并且通过添加“yesvis”类...通过removeClass（）和addClass（）变得可见）这是示例 .html 文件.....

<!DOCTYPE html>
<html>
<head>
    <title>Sample search page</title>
 <link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.css" />

<link rel="stylesheet" type="text/css" href="display.css">
    <script src="jquery-1.11.0.js" type="text/javascript"></script>
    <script src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.js" type="text/javascript"></script>
    <meta name="viewport" content="width=device-width"/>


</head>
<body>
    <!-- This is the first page -->
    <section id="firstpage" data-role="page">
        <div data-role="header">
            <h1>Page Content Header</h1>
        </div>
        <div class="ui-content">
            <form>  
                <label for="srchbox"> Search here !</label>
                <input type="search" id="srch" name="srchbox" /> 
                <input type="submit" value="Search ."/>
            </form>

    <p class="vis">Shirt..... ?</p>
<p class="vis">pent</p>

        <p class="vis">Coat</p>

        <p class="vis">Tuxedo</p>



            </div>
        <div data-role="footer">
            <h2>Page Content Footer</h2>
        </div>
    </section>

    <script type="text/javascript">

    $('form').on('submit',function(e){
        e.preventDefault();

        var value=$('#srch').val()
        var Search=new RegExp(value,"i");
            console.log(Search);//shows and works fine
           $.each($('p'),function(i,p){

           if( p[i].text().search(Search)>=-1){//throws an error .

            $(this).removeClass('vis').addClass('yesvis');    

           } })
         })







    </script>
</body>
</html>

让我很困惑的输出是这个 ... 另一个是这个.... 有人可以指导我吗？

【问题讨论】：

重新编辑了答案，请再检查一遍
应该是 $('p').eq(0).text();一旦你写了 $('p')[0] ，你就会得到一个字符串形式的文本。并且 .text() 适用于 jQuery 对象，而不是字符串。所以 'SomeString'.text() = boom

标签： jquery html jquery-mobile dom

【解决方案1】：

来自.text() 文档：

获取匹配元素集合中每个元素的组合文本内容，包括它们的后代，或者设置匹配元素的文本内容。

要单独获取文本内容，您可以执行以下操作

$('p').each(function() {
    var txt = $(this).text();
    // Do something with the string.
};

~~$('p')[0] 也应该可以正常工作。你也可以使用$('p').get(0)。~~

使用$('p').eq(0)。

【讨论】：

编辑于.eq()，@frenchie 提到

【解决方案2】：

你真的不需要 jQuery 来获取 textContents...这是一个简单的例子。

var p = document.getElementsByTagName('p');
for( var i=0; i<p.length; i++) {
   console.log(p[i].textContent);
}

【讨论】：