javascript - 使用 “each” 元素通过 JQuery 过滤表

Question

好的，希望大家能够帮助我。我对 JQuery 或 JQuery 的 each 选择器有问题。

我有一个示例表，我想在其中过滤我之前输入的特殊值。我从输入字段获得的这些值，将它们存储在变量中，分割数据并创建 JQuery 对象。 好吧，然后我认为我的选择有问题，在代码部分中标记。

<p>
    <input id="testyear" size="4" type="text">
    <input value="Werte" onclick="getvalue()" type="button">
</p>
<script>
    function getvalue() {
        var wert = $('#testyear').val();
        $("#years").find("tr").hide();
        var data = this.value.split(" ");
        // create jQuery Object
        var jQueryObject = $("#years").find("tr");
        // i think here is my error, i want to display only the object which are equal or better stored in my variable “wert”.
        $.each(data, function (){
            //jQueryObject = jQueryObject.filter(wert);
            jQueryObject == wert;

    });
    jQueryObject.show();
};

<!--Example Table-->
<table id="years">
    <tbody>
    <tr>
        <td>1997</td>
        <td class="century">20</td>
    </tr>
    <tr>
        <td>2001</td>
        <td class="century">21</td>
    </tr>
    </tbody>
</table>

我预计，当我在 inpt 字段中输入 1997 时，将显示包含 1997 的整个 tr。我知道这很简单，但我不知道，所以感谢您的帮助。

Answer 1

使用 filter最初将它们全部隐藏后，出现在 TR 上。

例如

 getvalue = function() {
  var wert = $('#testyear').val();
  // create jQuery Object
  $("#years tr").hide().filter(function() {
    return ~~$("td", this).first().text() >= wert;
  }).show();
};

JSFiddle: https://jsfiddle.net/TrueBlueAussie/h8Lejfac/

注释:

• ~~ 是一个整数转换的小技巧
• 您似乎有示例中不需要的额外代码
• 只需让 filter 为您想要保留的每个项目返回 true，为其余项目返回 false
• 使用 jQuery 时，避免使用内联事件处理程序(例如 onclick=)。请改用 jQuery 事件处理程序。见下文:

例如

$('#wert').click(function() {
  var wert = $('#testyear').val();
  // create jQuery Object
  $("#years tr").hide().filter(function() {
    return ~~$("td", this).first().text() >= wert;
  }).show();
});

JSFiddle: https://jsfiddle.net/TrueBlueAussie/h8Lejfac/1/