CODEWITHSUNDEEP
jqueryhtmljquery-mobiledom
Nasir Ul Islam Butt
Nasir Ul Islam Butt

Reputation: 121

Unable to fetch .text() of subsequent <p> tags

i have a little trouble in parsing the text() property of <p> tags . I am implementing a simple search bar in my web based cross-platform app (Virtual store) , which will look in the Dom and fetch matched strings as a result (A scenario of a search bar where user types name of brand/shirt/pent and so on and he/she receives the matched results).

I am working on a prototype, just to make sure basic structure gets rolling .. hence, i am using a bunch of <p> tags as DOM elements and applying search operations on it using Regex. Thats working fine but whats weird is that i am unable to get .text() property of

tags one by one ,instead i get in-line text of all p's texts as output ...

(Class 'vis' is applies so to make text invisible and it becomes visible by adding 'yesvis' class ... via removeClass() and addClass()) Here is the sample .html file ..... 

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

And Output which confuses me alot is this ...enter image description here And the other one is this .... Can someone guide me through it ?enter image description here

Upvotes: 2

Views: 123

Answers (2)

Wouter Florijn
Wouter Florijn

Reputation: 2941

From the .text() documentation:

Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.

To get the text contents seperately you can do something like

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

Also $('p')[0] should work fine. You can also use $('p').get(0).

Use $('p').eq(0).

Upvotes: 2

Edward J Beckett
Edward J Beckett

Reputation: 5140

You really don't 'need' jQuery to get the textContents... Here's trivial example.

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

Upvotes: 1

Related Questions