Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
 
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> Почему jquery так ведет себя?
GET  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



TERRAFORMING ENGINEER
******

Профиль
Журнал
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 3847
Пользователь №: 21196
На форуме: 6 лет, 9 месяцев, 8 дней
Карма: 87




        $(document).ready(function(){
(function($){
$.fn.ddd = function(){

this.each(function(){
$('ul',$(this)).prev('a').on('click',function(){

alert('OK');
return false;
});
});
};
})(jQuery);
$('#ddd_e').ddd();
});


<ul id='ddd_e'>
<li>
<a
href="#">111111111</a>//ok
<ul>
<li>
<a
href="#">2222222</a>//ok
<ul>
<li><a
href="#">33333333</a></li>//??????
</ul>
</li>
</ul>
</li>
</ul>


Привет, не пойму логику в этом месте
Цитата
$('ul',$(this)).prev('a').on('click',function(){


Все как бы работает, как надо, но почему так?

Мы берем ближайшего предыдущего родственного элемента 'a' - 'ul' в объекте $(this) почему для третьей строки не срабатывает. Вроде же все условия выполняются????


--------------------
Не тот велик, кто не падал, а тот кто падал и поднимался.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
paul85  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 1836
Пользователь №: 32147
На форуме: 4 года, 7 месяцев, 25 дней
Карма: 35




Мы берем все элементы <ul> в контексте this и смотрим на предыдущий одноуровневый элемент (то есть тот, который находится на том же уровне вложенности DOM), причем с фильтром <a>.

Для первых двух строк условие выполняется. Для третьей - нет. Потому, что у третьего элемента <a> нет одноуровневого вышестоящего по тексту <ul>. И всё.

Хочется отметить, что навешивать ивенты в цикле на мой взгляд не совсем хорошо. Наверное было бы проще объявить всем нужным элементам один и тот же класс и навесить один ивент сразу на все. Хотя утверждать не буду...

PMПисьмо на e-mail пользователю
    1   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 11789
Пользователь №: 23195
На форуме: 6 лет, 4 месяца, 17 дней
Карма: 429

Трезвый :
7 лет, 3 месяца, 17 дней


Цитата
почему для третьей строки не срабатывает. Вроде же все условия выполняются????

нет, у 33333333 нет "брата" (siblings) ul, поэтому обработчик события не вешается на него

Цитата
Хочется отметить, что навешивать ивенты в цикле на мой взгляд не совсем хорошо. Наверное было бы проще объявить всем нужным элементам один и тот же класс и навесить один ивент сразу на все. Хотя утверждать не буду...

это паттерн создания плагинов


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 11789
Пользователь №: 23195
На форуме: 6 лет, 4 месяца, 17 дней
Карма: 429

Трезвый :
7 лет, 3 месяца, 17 дней


Но тут цикл действительно не нужен.
Кстати, сравни:
<script>
(function ($) {
$.fn.ddd = function () {
$('ul', this).prev('a').on('click', function () {
alert('ok');
return false;
});
};
})(jQuery);

$(function () {
$('#ddd_e').ddd();
});
</script>


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    1   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
GET  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



TERRAFORMING ENGINEER
******

Профиль
Журнал
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 3847
Пользователь №: 21196
На форуме: 6 лет, 9 месяцев, 8 дней
Карма: 87




paul85
Invis1ble

Спасибо! Неправильно оказывается понял, как работает prev. И за замечания отдельное спасибо.

Цикл связан с тем, что вместо alert он пробегает попутно по всем ul и ищет открытые, чтоб закрыть, а нажатый ul открывает.

Цитата
это паттерн создания плагинов

Точно, вообще готовый плагин изучал, как работает и понял, что не понимаю до конца.

Вот кстати этот он:
http://masscode.ru/index.php/k2/item/51-liharmonica

Его код:

/*
* jQuery liHarmonica v 1.0
*
* Copyright 2013, Linnik Yura | LI MASS CODE |
http://masscode.ru
* http://masscode.ru
* Free to use
*
* 04.01.2013
*/

(function($){
$.fn.liHarmonica = function(params){
var p = $.extend({
currentClass:'cur', //Класс для выделенного пункта меню
onlyOne:true, //true - открытым может быть только один пункт,
//false - число открытых одновременно пунктов не ограничено

speed:500 //Скорость анимации
}, params);
return this.each(function(){
var
el = $(this).addClass('harmonica'),
linkItem = $('ul',el).prev('a');
el.children(':last').addClass('last');
$('ul',el).each(function(){
$(this).children(':last').addClass('last');
});
$('ul',el).prev('a').addClass('harFull');
el.find('.'+p.currentClass).parents('ul').show().prev('a').addClass(p.currentClass).addClass('harOpen');
linkItem.on('click',function(){
if($(this).next('ul').is(':hidden')){
$(this).addClass('harOpen');
}else{
$(this).removeClass('harOpen');
}
if(p.onlyOne){
$(this).closest('ul').closest('ul').find('ul').not($(this).next('ul')).slideUp(p.speed).prev('a').removeClass('harOpen');
$(this).next('ul').slideToggle(p.speed);
}else{
$(this).next('ul').stop(true).slideToggle(p.speed);
}
return false;
});
});
};
})(jQuery);


--------------------
Не тот велик, кто не падал, а тот кто падал и поднимался.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
GET  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



TERRAFORMING ENGINEER
******

Профиль
Журнал
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 3847
Пользователь №: 21196
На форуме: 6 лет, 9 месяцев, 8 дней
Карма: 87




Можете еще помочь:

Как изменить функцию, чтоб в случае, когда у "а" не окажется братьев ul, то выполнить {alert('NO');} а если все таки окажется, то alert('OK');.

Хотя бы куда копать...

Вот так переделал, добавил последним ссылка класс test и не могу выделить конкретно нажатую ссылку, find их все ищет:
                (function($){
$.fn.ddd = function(){


$(this).on('click',function(){

var link=$(this).find('a').hasClass('test');
//link=$(this).find('a.test:first-child').attr('href');

if(link)//конечная ссылка у нее нет братьев ul
{
alert('No');
}
else//массив ссылок у которых есть ul
{
var result=$('ul',$(this)).prev('a');
//result.each(function(){});
alert('Ok');
}
return false;
});

};
})(jQuery);
$('#ddd_e').ddd();

<ul id='ddd_e'>
<li>
<a
href="#">111111111</a>//ok
<ul>
<li>
<a
href="#">2222222</a>//ok
<ul>
<li><a
href="3#" class="test">33333333</a></li>
<li><a
href="4#" class="test">44444444</a></li>
<li><a
href="5#" class="test">55555555</a></li>
</ul>
</li>
</ul>
</li>
</ul>


--------------------
Не тот велик, кто не падал, а тот кто падал и поднимался.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 11789
Пользователь №: 23195
На форуме: 6 лет, 4 месяца, 17 дней
Карма: 429

Трезвый :
7 лет, 3 месяца, 17 дней


GET
не понял, что тебе нужно.


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
GET  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



TERRAFORMING ENGINEER
******

Профиль
Журнал
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 3847
Пользователь №: 21196
На форуме: 6 лет, 9 месяцев, 8 дней
Карма: 87




Invis1ble

Ну, чтоб когда на 11111111 или 22222222 нажимаешь вылетала OK, а когда на 3333333/44444444/5555555 вылетал их href ( или NO)


--------------------
Не тот велик, кто не падал, а тот кто падал и поднимался.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
[x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 11789
Пользователь №: 23195
На форуме: 6 лет, 4 месяца, 17 дней
Карма: 429

Трезвый :
7 лет, 3 месяца, 17 дней


Цитата (GET @ 29.12.2014 - 09:19)
Invis1ble

Ну, чтоб когда на 11111111 или 22222222 нажимаешь вылетала ОК, а когда на 3333333/44444444/5555555 вылетал их href

с классом test:
    $.fn.ddd = function () {
$(this).on('click', function (e) {
var $target = $(e.target);

if ($target.is('a')) {
if ($target.is('.test')) {
alert($target.attr('href'));
} else {
alert('ok');
}
}


return false;
});
};

без него:
    $.fn.ddd = function () {
$(this).on('click', function (e) {
var $target = $(e.target);

if ($target.is('a')) {
if ($target.next('ul').length) {
alert('ok');
} else {
alert($target.attr('href'));
}
}


return false;
});
};


Обрати внимание на дополнительную проверку, что кликнули именно на a.


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
GET  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



TERRAFORMING ENGINEER
******

Профиль
Журнал
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 3847
Пользователь №: 21196
На форуме: 6 лет, 9 месяцев, 8 дней
Карма: 87




Invis1ble

Cпасибо!!!

Блин пробывал тоже с e.target, но писал вместо "is" зачем-то "find".

+
Вероятно чтоб IE старый понимал, надо добавить:
var target = e.target || e.srcElement;


Спасибо еще раз!


--------------------
Не тот велик, кто не падал, а тот кто падал и поднимался.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 11789
Пользователь №: 23195
На форуме: 6 лет, 4 месяца, 17 дней
Карма: 429

Трезвый :
7 лет, 3 месяца, 17 дней


Цитата
Вероятно чтоб IE старый понимал, надо добавить

в доках jquery ничего об этом не сказано, так что скорее всего в недрах jquery уже позаботились об этом
в обработчик попадает не нативный объект-событие, а его абстракция


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 11789
Пользователь №: 23195
На форуме: 6 лет, 4 месяца, 17 дней
Карма: 429

Трезвый :
7 лет, 3 месяца, 17 дней


А вообще, если тебе надо отлавливать клики только на a, то вместо плясок с проверками проще сделать так:
$(this).on('click', 'a', function () {

а внутри обработчика узел будет доступен через this


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
GET  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



TERRAFORMING ENGINEER
******

Профиль
Журнал
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 3847
Пользователь №: 21196
На форуме: 6 лет, 9 месяцев, 8 дней
Карма: 87




Invis1ble

Можешь еще прокомментировать, правильно ли я понял?

var $target = $(e.target);


Здесь мы создали новый объект $target - как бы сам элемент по которому было нажатие, в отличии от $(this) по которому жали - т.е. весь главный ul.

Поэтому, то что в самом первом посте я определял, как
this.each(function(){
$('ul',$(this)).prev('a').on('click',function(){


теперь

достаточно
$target.each(function(){
(click просто выше)

проверил все работает, как надо.

Цитата
А вообще, если тебе надо отлавливать клики только на a, то вместо плясок с проверками проще сделать так:


Не..не..не если клик не на "а" то ul сворачивается.


--------------------
Не тот велик, кто не падал, а тот кто падал и поднимался.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 11789
Пользователь №: 23195
На форуме: 6 лет, 4 месяца, 17 дней
Карма: 429

Трезвый :
7 лет, 3 месяца, 17 дней


Цитата
Здесь мы создали новый объект $target - как бы сам элемент по которому было нажатие, в отличии от $(this) по которому жали - т.е. весь главный ul.

да

Цитата
$target.each(function(){

зачем тут цикл? в $target только один элемент будет.


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    1   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
GET  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



TERRAFORMING ENGINEER
******

Профиль
Журнал
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 3847
Пользователь №: 21196
На форуме: 6 лет, 9 месяцев, 8 дней
Карма: 87




Цитата
зачем тут цикл? в $target только один элемент будет.


Понял! Спасибо...smile.gif


--------------------
Не тот велик, кто не падал, а тот кто падал и поднимался.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

Опции сообщения  Включить смайлики?
 Включить подпись?
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темы Ответ в темуСоздание новой темыСоздание опроса