Проблема jquery с использованием селекторов parent () и next () - PullRequest
Новая
       8

Проблема jquery с использованием селекторов parent () и next ()

2 голосов
/ 23 ноября 2010

У меня есть следующий код: 

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Untitled Page</title>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".Note").click(function(){
        $(this).parent().parent().next(".divNote").slideToggle();
        });
    });
    </script>

  </head>
  <body>
    <table>
        <tr>
            <td class="Note" style="cursor: pointer">
                <font size="3" color="#800080"><b><u>TD</u></b> </font>
            </td>
        </tr>
    </table>
    <br />
    <div style="display: none" class="divNote">
    </div>
  </body>
</html>

Я могу понять, почему это не работает.

пример: Здесь

Любая помощь.

Ответы [ 6 ]

4 голосов
/ 23 ноября 2010

Позвольте мне объяснить, почему это не работает

Вы добавили фильтр к функции next(), который отфильтровывает только совпадающие элементы. В вашем случае он содержал только один элемент (br), который не имел соответствующего имени класса, поэтому результирующий набор был усечен до ноль элементов.

Способ заставить его работать

Таким образом, вместо простой фильтрации next элемента, вы должны отфильтровать из всех братьев и сестер : 

$(document).ready(function() {
  $(".Note").click(function(){
    $(this).parents("table").siblings(".divNote").slideToggle();
  });
});

или отфильтровать от всех следующих братьев и сестер (когда предыдущие братья и сестры не имеют никакого отношения) 

$(document).ready(function() {
  $(".Note").click(function(){
    $(this).parents("table").nextAll(".divNote").slideToggle();
  });
});
4 голосов
/ 23 ноября 2010

$('document') является нулевой ссылкой. Удалите кавычки, чтобы они ссылались на объект, а не на элемент HTML с именем document.

После этого должно работать. Также, пожалуйста, включите jQuery lib и включите DOCTYPE ...

РЕДАКТИРОВАТЬ: У вас есть несколько проблем со сценарием. Я настроил это так: 

$(document).ready(function() {

$(".Note").click(function(){
        $(this).closest('table').nextAll("div.divNote").slideToggle();
        });

});

tr обычно имеет tbody, которому он принадлежит. лучше использовать ближайший. Кроме того, next дает вам элемент next, элемент next для table - это br ...

2 голосов
/ 23 ноября 2010

Проблема заключается в обоих parent () и next (). (Я предполагаю, что у вас есть источник jQuery в вашем HTML, а вышеприведенный код обрезан для удобства чтения.)

Проблема с .parent (). Parent () заключается в том, что браузер отображает как. Обратите внимание на дополнительное, которое подразумевается вашим HTML. Вы можете решить эту проблему с помощью .parent (). Parent (). Parent (), но более надежным решением будет использование .parents ('table').

А для следующего ():

Получите ближайшего родственника каждого элемента в наборе соответствующих элементов. Если указан селектор, он получает следующий брат, только если он соответствует этому селектору.

Ваш следующий брат -
, у которого нет класса ".divNote". Поэтому ваш селектор ничего не возвращает. Вместо этого вы хотите использовать nextAll ().

Собираем все это вместе ... 

$(".Note").click(function(){
    $(this).parents('table')
         .nextAll(".divNote").slideToggle();
});

Рабочая jsFiddle здесь: http://jsfiddle.net/6WrjH/

2 голосов
/ 23 ноября 2010

Здесь что-то не так.

Во-первых, jQuery не включен. Включите jQuery, добавив 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

К вашей метке.

Во-вторых, вы должны ссылаться на $(document) без кавычек.

Некоторые браузеры (протестированные в Firefox) автоматически вставляют элемент tbody. Вы можете проверить это, выполнив console.log($(this).parent().parent()).

Решение - сделать $(this).parents("table").nextAll(".divNote").slideToggle();

0 голосов
/ 23 ноября 2010

Вы не включили ссылку на jQuery на своей странице ... добавьте ее в заголовок

[РЕДАКТИРОВАТЬ] То, что у вас работает ... просто не отображаетсячто угодно, так как вы выполняете slideToggle на невидимом, пустом div.Если вы измените стиль, чтобы увидеть элемент div и задать ему высоту, можно легко переключать слайд.

Также упростите выбор divNote, например: 

$(".divNote").slideToggle("slow");

Проблема заключается в том,не обязательно в parent () и next (), но более того, вы работаете с невидимой сущностью

0 голосов
/ 23 ноября 2010

Вы не включаете библиотеку jquery там. Ни один код jquery не будет работать без этого.

...