Question

我对jQuery选择器感到生气。

我正在使用您可以在此处找到的现成脚本（jQuery，CSS和HTML上的实时编辑可用，因此非常棒）：

在键入输入文本时过滤 li 元素。例如，当我输入＆＃34; Ap＆＃34;它隐藏了所有不包含＆＃34; Ap＆＃34;的 li 元素。例如， li 下面的＆＃34; Apple pie＆＃34;同时保持可见状态＆＃34;南瓜派＆＃34;没有按＆＃39;吨

<ul id="list">
  <li class="in">Apple pie</li>
  <li class="in">Pumpkin pie</li>
<ul>

它有效，但问题是在里面我需要放置很多其他的东西，就像你在这个例子中看到的那样：

<ul id="list">
  <li class="in">Apple pie <strong>abc</srong> Hello</li>
  <li class="in">Pumpkin pie <strong>123</srong> Bye</li>
<ul>

我不希望脚本也搜索＆＃34; abc＆＃34;，＆＃34; 123＆＃34;，＆＃34; Hello＆＃34;和＆＃34;再见＆＃34;所以我想把属性用作一种索引：

<ul id="list">
  <li class="in" for="Appe pie">Apple pie <strong>abc</srong> Hello</li>
  <li class="in" for="Pumpkin pie">Pumpkin pie <strong>123</srong> Bye</li>
<ul>

在[for]属性中，我只输入了我想要进行实时搜索的单词，而我正在键入但我无法编辑脚本。这是原始代码：

    $(document).ready(function() {

  var jobCount = $('#list .in').length;
  $('.list-count').text(jobCount + ' items');


  $("#search-text").keyup(function () {
     //$(this).addClass('hidden');

    var searchTerm = $("#search-text").val();
    var listItem = $('#list').children('li');
    var searchSplit = searchTerm.replace(/ /g, "'):containsi('")

      $.extend($.expr[':'], {
      'containsi': function(elem, i, match, array)
      {
        return (elem.textContent || elem.innerText || '').toLowerCase()
        .indexOf((match[3] || "").toLowerCase()) >= 0;
      }
    });


    $("#list li").not(":containsi('" + searchSplit + "')").each(function(e)   {
      $(this).addClass('hiding out').removeClass('in');
      setTimeout(function() {
          $('.out').addClass('hidden');
        }, 300);
    });

    $("#list li:containsi('" + searchSplit + "')").each(function(e) {
      $(this).removeClass('hidden out').addClass('in');
      setTimeout(function() {
          $('.in').removeClass('hiding');
        }, 1);
    });


      var jobCount = $('#list .in').length;
    $('.list-count').text(jobCount + ' items');

    //shows empty state text when no jobs found
    if(jobCount == '0') {
      $('#list').addClass('empty');
    }
    else {
      $('#list').removeClass('empty');
    }

      });

    });

我尝试使用以下语法的所有可能组合但没有成功：

li[for]
$("#list li").attr("for")
$("#list li[for]")

相信我，我花了4个小时。在某些时候，我设法＆＃34;点＆＃34; [for]属性中的脚本，但是以不必要的错误方式：

$("#list li[for^="'+searchTerm+'"]")

我还尝试使用Firebug控制台调试代码仍然没有成功。

Answer 1

其他注释是正确的 - 如果您修改代码以从类似数据的attr读取它会更好。

但是，不是将搜索词嵌入到属性中，而是将搜索词包围在可搜索的内容之外，并调整选择器，如下所示：

http://codepen.io/anon/pen/cJGfd

HTML：

<li class="in"><span>Apple pie</span> Pumpkin</li>
<li class="in"><span>Pumpkin pie</span></li>
<li class="in"><span>Banana-creme pie</span></li>

JS：

$("#list li span").not(":containsi('" + searchSplit + "')").each(function(e)   {
  $(this).closest('li').addClass('hiding out').removeClass('in');
  setTimeout(function() {
      $('.out').addClass('hidden');
    }, 300);
});

$("#list li span:containsi('" + searchSplit + "')").each(function(e) {
  $(this).closest('li').removeClass('hidden out').addClass('in');
  setTimeout(function() {
      $('.in').removeClass('hiding');
    }, 1);
});

任务不可能：jQuery属性选择器

1 个答案: