JQuery братьев и сестер () без селектора не работает - PullRequest
Новая
       3

JQuery братьев и сестер () без селектора не работает

2 голосов
/ 22 февраля 2011

Простой стол: 

    <table class="schedules">
        <th colspan="2">Saved Schedules</th>
        <tr>
            <td>Winter 2011 </td>           
        </tr>
        <tr>
            <td>Winter 2011 (2) </td>           
        </tr>
        <tr>
            <td>May Term 2011 </td>         
        </tr>
        <tr>
            <td>Fall Term 2011</td>         
        </tr>       
    </table>

Jquery: 

    <script type="text/javascript">
        $(document).ready(function(){
            $(".schedules td").click(function(){
                $(this).css("background-color","blue")
                $(this).siblings().css("background-color","white");         
            });
        });     
    </script>

Это должно переключить выбранную ячейку на background-color: синий, а братья и сестры на background-color: white, но когда я нажимаю, каждая ячейка просто меняется на background-color: blue, а остальные вообще не меняются.

Ответы [ 2 ]

5 голосов
/ 22 февраля 2011

Ваши <td> кузены, а не братья и сестры.Родители ТД (<tr>) - братья и сестры.Вы можете изменить jquery следующим образом ...

http://jsfiddle.net/superuntitled/fb4g7/

    $(document).ready(function(){
        $(".schedules tr").click(function(){
            $(this).find('td').css("background-color","blue")
            $(this).siblings().find('td').css("background-color","white");         
        });
    });
2 голосов
/ 22 февраля 2011

Другие элементы <td> не являются братьями и сестрами.

Вы можете пройти до общего предка с помощью метода closest() [документы] , затем find() [документы] <td> элементов. 

$(document).ready(function(){
    $(".schedules td").click(function(){
        $(this).css("background-color","blue")
               .closest('table').find('td').not(this).css("background-color","white");         
    });
});

Или вы можете перейти к <tr> и использовать .siblings() для этогозатем следует метод children() [документы] . 

$(document).ready(function(){
    $(".schedules td").click(function(){
        $(this).css("background-color","blue")
               .parent().siblings().children('td').css("background-color","white");         
    });
});

РЕДАКТИРОВАТЬ:

Или наиболее эффективным было бы кэширование ваших <td> элементов и исключение текущих. 

$(document).ready(function(){
    var tds = $(".schedules td").click(function(){
        $(this).css("background-color","blue");
        tds.not(this).css("background-color","white");         
    });
});

Полностью исключает выбор DOM внутри обработчика.

Обычно вы должны пытаться кэшировать выборки, а не повторять их.

...