JQuery выбрать несколько: nth-child () - PullRequest
Новая
       10

JQuery выбрать несколько: nth-child ()

4 голосов
/ 01 декабря 2011

Это моя таблица, используйте tr и td. 

NAME Address CITY STATE 
ABC   123    A     CA 
AB8   123    B     CA
AFC   456    B     TX 
POI   985    C     KJ

После того, как документ будет готов, он все будет скрыт.

Теперь я хочу, чтобы строка показывала все tr: -> Колонка (4) = CA "и" Колонка (3) = B

Я устал мой код: 

$("table[id=maintablex] tr td:nth-child(4):contains('CA'), table[id=maintablex] tr td:nth-child(3):contains('B')").closest('tr').show();

Но это показывает, что все имеют (4) = CA и (3) = B ... Мой код был "ИЛИ", может кто-нибудь мне помочь?

Добавлен полный код HTML: 

<table id="table">
    <tr>
        <td>ABC</td>
        <td>123</td>
        <td>A</td>
        <td>CA</td>
    </tr>
    <tr>
        <td>ABC</td>
        <td>1234</td>
        <td>B</td>
        <td>CA</td>
    </tr>
    <tr>
        <td>AUF</td>
        <td>123</td>
        <td>C</td>
        <td>TX</td>
    </tr>
    <tr>
        <td>ABC</td>
        <td>456</td>
        <td>B</td>
        <td>TX</td>
    </tr>
</table>
<script language="Javascript">
$("table[id=table] tr").hide();

// Code show here


</script>

Результат, который я хочу показать: 

AB8   123    B     CA

Ответы [ 4 ]

1 голос
/ 01 декабря 2011

Ваш самый первый селектор всегда будет соответствовать строкам, где State = CA И где State = B. Я бы разбил это на две части.Не проверял этот код, но он должен приблизить вас ... 

var stateRows = ("#maintablex tr td:nth-child(4):contains('CA')").parent();
var matchRows = stateRows.find("td:nth-child(3):contains('B')").parent();

matchRows.doWhateverYouLikeWithTheResults();
1 голос
/ 01 декабря 2011

Почему бы не сделать это следующим образом: 

$("table[id=maintablex] tr td:nth-child(3):contains('B')", 
    $("table[id=maintablex] tr td:nth-child(4):contains('CA')")
).closest('tr').show();

Я не знаю, если это быстрее, но на основании ответа @Jasper, почему бы не сделать это: 

//select the table, find all `<td>` elements that contain `CA` and iterate through each of them
$('#table')
    .find('td:nth-child(4):contains("CA")')
    .closest('tr')
    .find('td:nth-child(3):contains("B")')
    .closest('tr')
    .addClass('active');

Вот jsfiddle: http://jsfiddle.net/KQMXe/

0 голосов
/ 01 декабря 2011

Попробуйте это 

$.each($('table#table tr td:nth-child(4):contains("CA")').parent(),function(){
    if(($.inArray(this, $('table#table tr td:nth-child(3):contains("B")').parent())) > -1){
        $(this).show();
    }
});

Надеюсь, это поможет.:)

0 голосов
/ 01 декабря 2011

JS - 

//select the table, find all `<td>` elements that contain `CA` and iterate through each of them
$('#maintablex').find('td:nth-child(4):contains("CA")').each(function (index, value) {

    //un-hide the parent `<tr>` element of this `<td>` by adding the `active` class to the `<tr>`
    $(this).parents('tr:first').addClass('active');
});

CSS - 

/*Hide all the table rows by default*/
tr {
    display : none;
}

/*declare a class that shows the table rows when added to them*/
tr.active {
    display : table-row;
}

ОБНОВЛЕНИЕ

Я обновил код выше, чтобы искать толькотретий столбец в каждой строке (я раньше опускал эту часть ответа).

Вот jsfiddle: http://jsfiddle.net/jasper/Mp7Jq/3/

...