jQuery - 另一个选择器内的选择器 - 传入变量失去它的值并成为索引器？

我对jQuery有点新鲜，只是想知道如何去传递字符串值而不是看起来是从选择器中引用jQuery项目？我很难解释，所以这里有一个示例演示。甚至不知道该如何标题，所以如果你能想到更好的标题，请编辑标题。jQuery - 另一个选择器内的选择器 - 传入变量失去它的值并成为索引器？

在我所在的线上$("td").filter(function(str){传入的str成为TD所在的索引位置。所以在第一次调试时它是0，下一次是1等等。我试过谷歌，但我甚至不知道要搜索什么，任何文档/代码的帮助将不胜感激

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("select[name='showTeam']").change(function() { 
      $("select[name='showTeam'] option:selected").each(function() { 
       var str = $(this).val().toLowerCase(); 
       //str = what it was set to up there 
       //alert(str); 
       $("td").filter(function(str) { 
        //str = becomes a number = to position of TD.. ie for 5th TD match STR = 4 (starts at index 0) 
        return $(this).text().toLowerCase().indexOf(str) != -1; 
      }).css('background','red'); 
     }); 
    }) 
}); 
</script> 
Show Team: <select id="showTeam" name="showTeam"> 
    <option>All</option> 
    <option>Chelsea</option> 
    </select> 

<div id="games"> 
    <table border="1"> 
    <tbody> 
    <tr> 
    <th>ID</th> 
    <th>Game date</th> 
    <th>Field</th> 
    <th>Home team</th> 
    <th>Home team score</th> 
    <th>Away team</th> 
    <th>Away team score</th> 
    <th>Game type</th> 
    </tr> 
    <tr class="odd_line" id="game_460"> 
    <td>459</td> 
    <td>03 Nov 19:00</td> 
    <td>Field 2</td> 
    <td>Madrid </td> 
    <td>3</td> 
    <td>Bayern Munich </td> 
    <td>1</td> 
    <td>Season</td> 
    </tr> 
    <tr class="odd_line" id="game_461"> 
    <td>460</td> 
    <td>03 Nov 19:00</td> 
    <td>Field 3</td> 
    <td>chelsea</td> 
    <td>5</td> 
    <td>arsenal</td> 
    <td>4</td> 
    <td>Season</td> 
    </tr> 
</div>

来源

2012-02-16 Brian Garson

[有关'.filter（）']的文档（http://api.jquery.com/filter/） – bfavaretto 2012-02-16 19:18:17

呃我不知道我是如何错过的，我想我必须重新思考我的方法..谢谢 – 2012-02-16 19:20:23

你在做什么？你打算用'filter（）'方法实现什么？ – 2012-02-16 19:20:51

$(document).ready(function(){ 
    $("#showTeam").change(function() { 
     var searchFor = $(this).val().toLowerCase(); 
     $("#games table tbody tr td:contains('" + searchFor + "')").parent().css('background','red'); 
    }) 
});

Demo

来源

2012-02-16 19:31:23

工程就像一个魅力。谢谢 – 2012-02-16 20:09:50

嗯，是的。第一个参数将引用匹配元素集中元素的索引。只要做到：

... 
$("select[name='showTeam'] option:selected").each(function() { 
    var str = $(this).val().toLowerCase(); 

    $("td").filter(function() { 

     return $(this).text().toLowerCase().indexOf(str) != -1; 
    }).css('background', 'red'); 
    ...

因为str的filter回调函数的范围内，就已经是可用的。

从docs：

.filter（函数（指数））

函数（指数）用作用于组中的每个元件的测试的功能。这是当前的DOM元素。

来源

2012-02-16 19:20:14 karim79

谢谢，我发现你已经改变了这个使用.each而不是.change，所以它不再触发选择项目的变化。有什么想法吗？ – 2012-02-16 19:30:34

@BrianGarson - 哼？不，我刚刚发布的内容足以让你看到我轻松更改的内容。这不是你的代码的重写:) – karim79 2012-02-16 19:32:54

$(document).ready(function(){ 
    $("#showTeam").change(function() { 
     var target = $("#showTeam").val(); 
     $("#games td:contains(" + target + ")").css('background','red'); 
    }); 
});

我做了一个对的jsfiddle证明这一点。 http://jsfiddle.net/Zf5dA/

注： :contains()是大小写敏感的，所以我不得不做出“切尔西”在表中资本化。我简化了select元素上的选择器 - 它有一个id，所以我选择了它。更快，更简单。这将找到td单元格，其中包含的文字，但它们也可以包含其他文字。这会让你开始。

来源

2012-02-16 19:32:45

jQuery - 另一个选择器内的选择器 - 传入变量失去它的值并成为索引器？

回答

相关问题