Как искать с помощью JavaScript - PullRequest
Новая
       8

Как искать с помощью JavaScript

0 голосов
/ 22 ноября 2018

Мне нужно сделать строку поиска, чтобы найти h1 в div, но мне нужно также скрыть div зала не только h1, который не соответствует, я нашел это в w3school, но я не знаю, как работает $(this)Мне нужно выбрать div с классом 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)
        });
    });
});

Ответы [ 2 ]

0 голосов
/ 25 ноября 2018

HTML-код 

<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)
            });
        });
    });
0 голосов
/ 22 ноября 2018 
$(document).ready(function () {
    $('#searchbuttonid').on('click',function(){
        $(".blog-card h1").each(function(){
            console.log($(this).attr('Id'));
        });
    });
});

Этот код вернет все Id тега h1 в консоли в div с классом blogcard

, эта строка попадает в обработчик события при нажатии кнопки поиска 

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

, тогда элемент h1 внутри blog-card ищется jquery, поэтому он записывается как 

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

причина, по которой мы применяем .each для выбора всех h1 в основном классе

после входа в функцию он получает все идентификаторы элемента h1 в цикле, используя $(this).attr('Id')

, а затем печатает на консоли, используя 

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