jQuery - селектор внутри другого селектора - переданный в переменную теряет свое значение и становится индексатором? - PullRequest
Новая
       17

jQuery - селектор внутри другого селектора - переданный в переменную теряет свое значение и становится индексатором?

1 голос
/ 16 февраля 2012

Я немного новичок в jQuery и мне просто интересно, как я передаю строковое значение, а не то, что кажется ссылкой на элемент jQuery из селектора?Мне сложно объяснить, вот пример демонстрации.Даже не знаю, что озаглавить, так что, пожалуйста, имейте при редактировании заголовок, если можете придумать лучший.

В строке, где я делаю $("td").filter(function(str){, переданная строка становится индексной позициейиз которых TD я в. Так что при отладке в первый раз это 0, в следующий раз 1 и так далее.Я пробовал Google, но я даже не уверен, что искать, любая документация / помощь по коду будет высоко ценится 

<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>

Ответы [ 3 ]

1 голос
/ 16 февраля 2012 
$(document).ready(function(){
    $("#showTeam").change(function () {
        var searchFor = $(this).val().toLowerCase();
        $("#games table tbody tr td:contains('" + searchFor + "')").parent().css('background','red');
    })
});

Демо

1 голос
/ 16 февраля 2012 
$(document).ready(function(){
    $("#showTeam").change(function() {
        var target = $("#showTeam").val();
        $("#games td:contains(" + target + ")").css('background','red');
    });
});

Я сделал jsfiddle, чтобы продемонстрировать это.http://jsfiddle.net/Zf5dA/

Примечания: :contains() чувствителен к регистру, поэтому мне пришлось указывать заглавную "Челси" в таблице.Я упростил селектор на элементе выбора - у него есть идентификатор, поэтому я выбрал его.Быстрее и проще.Это найдет td ячеек, которые содержат текст, но они также могут содержать другой текст.Это поможет вам начать.

1 голос
/ 16 февраля 2012

Ну да. Первый параметр будет ссылаться на индекс элемента в наборе соответствующих элементов. Просто сделай: 

...
$("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.

Из документов :

.фильтр (функция (индекс))

функция (индекс) Функция, используемая в качестве теста для каждого элемента в наборе. это текущий элемент DOM.

...