Question

我在解析text()标签的<p>属性方面遇到了一些麻烦。我正在我的基于Web的跨平台应用程序（虚拟商店）中实现一个简单的搜索栏，它将在 Dom 中查找并获取匹配的字符串（用户类型的搜索栏的场景）品牌名称/衬衫/背心等等，他/她会收到匹配的结果。）

我正在研究一个原型，只是为了确保基本结构滚动..因此，我使用一堆<p>标签作为 DOM 元素并在其上应用搜索操作使用正则表达式。这很好但但很奇怪的是我无法逐个获得

标签的.text（）属性，而是将所有p文本的内嵌文本作为输出。

（Class＆＃39; vis＆＃39;适用于使文字不可见，并通过添加＆＃39; yesvis＆＃39;类...通过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>

输出让我感到困惑的是...... enter image description here 而另一个是这个.... 有人可以指导我完成吗？

Answer 1

来自.text()文档：

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

要单独获取文本内容，您可以执行类似

的操作

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

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

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

Answer 2

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

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

无法获取后续<p>标记的.text（）</p>

2 个答案: