Tukukkk

I need to make a search bar to find h1 in divs but I need also to hide the hall div not only h1 that not matches I found this on w3school but I don't know how $(this) works I need to select the div with class blog-card

        <input id="myInput" type="text" placeholder="Search.." />





<div class="blog-card col-sm-12 col-md-6">

            <div class="meta">

                <div class="photo" style="background-image: url(https://storage.googleapis.com/chydlx/codepen/blog-cards/image-1.jpg)"></div>

                <ul class="details">

                    <li class="author"><a href="#">John Doe</a></li>

                    <li class="date">Aug. 24, 2015</li>

                    <li class="tags">

                        <ul>

                            <li><a href="#">Learn</a></li>

                            <li><a href="#">Code</a></li>

                            <li><a href="#">HTML</a></li>

                            <li><a href="#">CSS</a></li>

                        </ul>

                    </li>

                </ul>

            </div>

            <div class="description">

                <h1>Learning to Code</h1>

                <h2>Opening a door to the future</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad eum dolorum architecto obcaecati enim dicta praesentium, quam nobis! Neque ad aliquam facilis numquam. Veritatis, sit.</p>

                <p class="read-more">

                    <a href="#">Read More</a>

                </p>

            </div>

        </div>



$(document).ready(function () {

    $("#myInput").on("keyup", function () {

        var value = $(this).val().toLowerCase();

        $(".blog-card .description h1").filter(function () {

            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

        });

    });

});

$(document).ready(function () {

    $('#searchbuttonid').on('click',function(){

        $(".blog-card h1").each(function(){

            console.log($(this).attr('Id'));

        });

    });

});

This code will return all the h1 tag's Id in console in div with class blogcard

this line hits the event handler on clicking of search button

$('#searchbuttonid').on('click',function(){

then the h1 element inside blog-card is searched by jquery
so it is written as

$(".blog-card h1").each(function(){

the reason we apply .each to select all h1 in the main class

after entering into the function, it then gets all the Id's of the h1 element in the loop using $(this).attr('Id')

then its printed on console using

console.log($(this).attr('Id'));

HTML code

<input id="search" type="text" placeholder="Search.." />

<div class="blog-card col-sm-12 col-md-6">

        <div class="meta">

            <div class="photo" style="background-image: url(https://storage.googleapis.com/chydlx/codepen/blog-cards/image-1.jpg)"></div>

            <ul class="details">

                <li class="author"><a href="#">John Doe</a></li>

                <li class="date">Aug. 24, 2015</li>

                <li class="tags">

                    <ul>

                        <li><a href="#">Learn</a></li>

                        <li><a href="#">Code</a></li>

                        <li><a href="#">HTML</a></li>

                        <li><a href="#">CSS</a></li>

                    </ul>

                </li>

            </ul>

        </div>

        <div class="description">

            <h1>Learning to Code</h1>

            <h2>Opening a door to the future</h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad eum dolorum architecto obcaecati enim dicta praesentium, quam nobis! Neque ad aliquam facilis numquam. Veritatis, sit.</p>

            <p class="read-more">

                <a href="#">Read More</a>

            </p>

        </div>

    </div>

Javascript Code

$(document).ready(function () {

        $("#search").on("keyup", function () {

            var value = $(this).val().toLowerCase();

            $(".blog-card .description h1").filter(function () {

                $(this).parent(".description").parent(".blog-card").toggle($(this).text().toLowerCase().indexOf(value) > -1)

            });

        });

    });