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 - 另一個選擇器內的選擇器 - 傳入變量失去它的值併成爲索引器？

回答

相關問題