如何在Jquery或javaScript中对两个选项卡使用相同的脚本

我的jquery应用程序中有两个选项卡…我还有一个带有复选框列表的搜索过滤器（使用jquery）…我希望这个搜索过滤器在两个选项卡中…我在第一个选项卡中添加了…它工作正常…但是如果我在第二个选项卡中添加了…显示了列表，但没有显示搜索过滤器

我的编码如下

搜索列表筛选器编码：

  <script> 

(function ($) {
  // custom css expression for a case-insensitive contains()
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };

  function filterList(header, list) { 
  // header is any element, list is an unordered list
    // create and add the filter form to the header
    var form = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","type":"text"});
    $(form).append(input).appendTo(header);

    $(input)
      .change( function () {
        var filter = $(this).val();
        if(filter) {

          $matches = $(list).find('b:Contains(' + filter + ')').parent();
          $('li', list).not($matches).slideUp();
          $matches.slideDown();

        } else {
          $(list).find("li").slideDown();
        }
        return false;
      })
    .keyup( function () {
        // fire the above change event after every letter
        $(this).change();
    });
  }


  //ondomready
  $(function () {
    filterList($("#form"), $("#list"));
  });
}(jQuery));

  </script>

（函数（$）{
//不区分大小写的contains（）的自定义css表达式
jQuery.expr['：'].Contains=函数（a，i，m）{
返回（a.textContent | | a.innerText | |“”）.toUpperCase（）.indexOf（m[3].toUpperCase（））>=0；
};
函数过滤器列表（标题，列表）{
//标题是任意元素，列表是无序列表
//创建筛选表单并将其添加到标题中
var form=$（“”）.attr（{“类”：“过滤性能”，“操作”：“#”}），
输入=$（“”）.attr（{“类”：“过滤器输入”，“类型”：“文本”}）；
$（表单）.append（输入）.appendTo（标题）；
$（输入）
.改变（功能）{
var filter=$（this.val（）；
如果（过滤器）{
$matches=$（list.find（'b:Contains（'+filter+'）））.parent（）；
$（'li'，list）.not（$matches）.slideUp（）；
$matches.slideDown（）；
}否则{
$（list.find（“li”）.slideDown（）；
}
返回false；
})
.keyup（函数（）{
//在每个字母后触发上述更改事件
$（this.change（）；
});
}
//昂多姆雷迪
$（函数（）{
过滤器列表（$（“#表单”）、$（“#列表”）；
});
}（jQuery））；

在第一个选项卡Div标记中：

<div id="form"></div>
<ul id="list"> 
        <li><input type ="checkbox" name="v1" ><img src="images/apple.png" width="30" align="absmiddle" height="30"> <b>Bala</b></li> 
        <li><input type ="checkbox" name="v1" ><img src="images/acorn_squash.png" width="30" align="absmiddle" height="30"> <b>Babu</b></li> 
        <li><input type ="checkbox" name="v1"><img src="images/broccoli.png" width="30" align="absmiddle" height="30"> <b>David</b></li> 
        <li><input type ="checkbox" name="v1"><img src="images/carrot.png" width="30" align="absmiddle" height="30"> <b>Dinesh</b></li> 
        <li><input type ="checkbox" name="v1"><img src="images/celery.png" width="30" align="absmiddle" height="30"> <b>Eswaran</b></li> 
    </ul>

巴拉
巴布
大卫
迪内什
埃斯瓦兰

在第二个选项卡Div tag中：

 <div id="form"></div>
<ul id="list"> 
        <li><input type ="checkbox" name="v1" ><img src="images/apple.png" width="30" align="absmiddle" height="30"> <b>Bala</b></li> 
        <li><input type ="checkbox" name="v1" ><img src="images/acorn_squash.png" width="30" align="absmiddle" height="30"> <b>Babu</b></li> 
        <li><input type ="checkbox" name="v1"><img src="images/broccoli.png" width="30" align="absmiddle" height="30"> <b>David</b></li> 
        <li><input type ="checkbox" name="v1"><img src="images/carrot.png" width="30" align="absmiddle" height="30"> <b>Dinesh</b></li> 
        <li><input type ="checkbox" name="v1"><img src="images/celery.png" width="30" align="absmiddle" height="30"> <b>Eswaran</b></li> 
    </ul>

巴拉
巴布
大卫
迪内什
埃斯瓦兰

在这些编码中，第一个选项卡，搜索过滤器可以正常工作……但第二个选项卡，仅显示列表，不显示搜索框

---

我在div中尝试了“id”，而在div中尝试了“class”。但这也不起作用…我在这里做错了…如何对两个选项卡使用相同的脚本…

发生这种情况是因为

$（“#表单”）

由于使用了“id”，所以只返回一个对象。如果要选择多个div，请为div使用一个类

你应该这样做：

 $(function () {
    $('.form').each(function(){
       you pass to filterList  your div and the next element in the dom (the ul)
       filterList($(this), $(this).next());
     }
  });
}(jQuery));

---

要首先用class=form迭代all div，id在页面上应该是唯一的，因此我无法通过HTML代码片段判断这是否正确。第二，我没有看到任何HTML上有

filterPerform

或

filterinput

。