Навигация по HTML обьекту jQuery

220

26 октября 2017, 08:19

Есть подобная структура кода:

<div class="lang-line">
   <div class="sh-name">ab</div>
   <div class="lo-name">Abkhazian</div>
</div>
<div class="lang-line">
   <div class="sh-name">aa</div>
   <div class="lo-name">Afar</div>
</div>

Хочу настроить быстрый поиск языка, так что добавил все в обьект JQ:

$.each($('.langs .lang-line'), function() {
    l.push([$(this)]);
});

Но я не могу разобраться как использовать эти обьекты. Мне нужно сверять их название с введеным и если оно совпадает то все остальные обьекты должны быть скрыты, а этот остаться видимым:

Вот я пытался это реализовать:

for (var j=0; j<strArray.length; j++) {
    console.log(strArray[0].{0}.innerText);
    if (strArray[j][0][0][1].toLowerCase().match(str.toLowerCase())) {
        output.push(strArray[j].text());
        $(".lang-line").addClass("lang-line-srchprog");
        strArray[j].parent().style("display", "table");
    }
}

output - массив содержащий информацию которая будет выведена позже; strArray - тот же массив l только принят функцией; str - текст который был введен пользователем (пользователь вводит в input что он хочет найти).

Вот так выглядит сам обьект:

Как получить доступ ко всем этим параметрам? В особенности мне нужен innerText/textContent что бы сравнить сразу короткое название и длинное одновременно(так как оно ведь считывает содержимое всех чилдренов, верно?)

Answer 1

Попробуйте что-то около этого:

function filterLang(contains) { 
  contains = contains.toLowerCase(); // к нижнему регистру 
  $('.langs .lang-line').each((i, el) => { 
    let $langLine = $(el); 
    let langName = $langLine.text().toLowerCase(); // текст блока с id и именем языка 
    let isContains = langName.indexOf(contains) >= 0; // чекаем содержит ли в себе 
    $langLine.css('display', (isContains ? '' : 'none')); // скрываем если не содержит иначе показываем 
  }); 
} 
 
$('#searcher').keyup(e => { 
  filterLang($(e.target).val()); 
});

.sh-name { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="searcher" type="text"> 
 
<div class="langs"> 
  <div class="lang-line"> 
    <div class="sh-name">ab</div> 
    <div class="lo-name">Abkhazian</div> 
  </div> 
  <div class="lang-line"> 
    <div class="sh-name">aa</div> 
    <div class="lo-name">Afar</div> 
  </div> 
</div>

Создание интернет-магазина электроники в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не срабатывает обработчик событий JS

По событию должна происходить смена классовСкрипт подключаю извне, в теге head

224

HTML

Не наследуется font-family для некоторых блоков

Суть проблемы: css свойство font-family: 'PT Sans', sans-serif; работает как надо только для header и footer, для тегов section почему-то выставляется шрифт sans-serif, а не РТ SansТ

223

HTML

Вывод options циклом в select с помощью JS

У меня есть массив optionValues такого вида ["", "oil", "bitumen", "avs", "CMM"] Это опции из selectКак мне сделать так чтоб эти опции вывести в другом созданном select...

266

HTML

Отложенный рендер Razor во View

Прошу прощения, если неккоректно описал вопрос, однако, не знаю как назвать иначеПроблема в следующем

215