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

Question

我对 jQuery 选择器很生气。

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

http://codepen.io/robooneus/pen/ivdFH

它在输入输入文本时过滤 li 元素。例如，当我输入“Ap”时，它会隐藏所有不包含“Ap”的 li 元素。例如，在 li 下方，“Apple pie”保持可见，而“Pumpkin pie”则不可见。

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

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

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

我不希望脚本也搜索“abc”、“123”、“Hello”和“Bye”，所以我想使用属性作为一种索引：

<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 个小时。在某些时候，我设法在 [for] 属性中“指向”了脚本，但是以一种不需要的和错误的方式：

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

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

Answer 1

其他 cmets 是正确的 - 如果您将代码修复为从类似数据的 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);
});