主页 / 问题 / 735301
Accepted
Telion
Asked:2020-10-24 22:14:00 +0000 UTC2020-10-24 22:14:00 +0000 UTC

jQuery HTML 对象导航

  • 772

有类似的代码结构：

<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- 用户输入的文本（用户输入他想在输入中找到的内容）。

这是对象本身的样子： 在此处输入图像描述

如何访问所有这些选项？特别是，我需要 innerText/textContent 来同时比较短名称和长名称（因为它读取所有孩子的内容，对吧？）

html

1 个回答

  1. Best Answer

    尝试这样的事情：

    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>

    • 1

相关问题