VPF::Условие "если присутствует элемент с классом xyz"

zevgan

Дата 25.4.2008, 20:38 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 27
Регистрация: 25.3.2005

Репутация: нет
Всего: нет

Всем доброго вечера.

Подскажите пожалуйста синтактически правильную конструкцию на js описывающую следующее условие:

"Если на странице присутствует элемент с классом xyz - измени в стиле элемента с ID abc значения position:static ; visibility:visible;"

Конструкция наверняка довольно простая и если уже где-то есть, просто дайте линк. Поиском не нашёл. Заранее спасибо.

ksnk

Дата 25.4.2008, 22:55 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Проще писать это на jQuery. smile

Код


if($('xyz ').length) {
  $('#abc').css({position:'static' , visibility:'visible'})
}

Это сообщение отредактировал(а) ksnk - 25.4.2008, 22:56

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

zevgan

Дата 26.4.2008, 00:02 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 27
Регистрация: 25.3.2005

Репутация: нет
Всего: нет

Спасибо за ответ =)

Да, это вариант, но только лишь из-за этой ерунды прикручивать к страничке 50-ти килобайтовый jQuery не хочется... Сам покопавшись в исходниках чужих скриптов нашёл такую конструкцию:

Код


forEach(document.getElementsByTagName('img'), function(image) {
      if (image.className.search(/\bcontent-photo\b/) != -1) {
        document.getElementById('spacer-cont-image').style.display="block";
      }
    });

Она не совсем соответствует первично заданным критериям и наверное довольно не эстетична... Но ведь работает smile

ksnk

Дата 26.4.2008, 08:58 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

zevgan, Минимизированный и ужатый jQuery - 30 кб.

Цитата(zevgan @ 26.4.2008, 00:02

)

forEach

а из какой библиотеки такая конструкция?

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Zeroglif

Дата 26.4.2008, 09:21 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 644
Регистрация: 22.9.2005

Репутация: 1
Всего: 66

Цитата(ksnk @ 25.4.2008, 22:55

)

Проще писать это на jQuery. smile

Если б не смайлик я бы чёнить сказал. smile

ksnk

Дата 26.4.2008, 09:30 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Zeroglif, Ну, я представил себе процесс пробежки по html-дереву, вообразил количество функций, которые нужно бы сюда скопировать + для работы с классами, и решил ограничится 3 строчками на jQuery smile

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Zeroglif

Дата 26.4.2008, 10:08 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 644
Регистрация: 22.9.2005

Репутация: 1
Всего: 66

Цитата(zevgan @ 26.4.2008, 00:02

)

image.className.search(/\bcontent-photo\b/

В javascript-e дефис не считается частью слова, если классы называются сложно - с дефисами, то метасимвол \b не удачный выбор:

Код


var s = 'raz-dva raz-dva-tri nol-raz-dva-tri';
s = s.replace(/\braz-dva\b/g, 'hello');
alert(s); //-> hello hello-tri nol-hello-tri

Цитата(ksnk @ 26.4.2008, 09:30

)

и решил ограничится 3 строчками на jQuery

Тогда в таком же стиле можно ограничиться и одной smile

Код


f('xyz', 'abc');

ksnk

Дата 26.4.2008, 10:29 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Цитата(Zeroglif @ 26.4.2008, 10:08

)

Тогда в таком же стиле можно ограничиться и одной

Не совсем ;-) Эту самую f никакой чужой дядя не написал и придется ее сочинять самому.

Код


// функция пробежки по дереву...
function scanDomTree(e,callback,lvl){
    var o= e,
        stack=[null]
    if(typeof(lvl)=='undefined') lvl=1000; // never ever climb so deap;
    do {
        if(!o) {
            o=stack.pop(); continue  // go up
        }
        if(callback.call(this,o))
            return o;
        if (o.firstChild && stack.length<=lvl) {
            stack.push(o.nextSibling);
            o=o.firstChild; // go deep
        } else
            o=o.nextSibling
    } while(stack.length)
    return null;
}

// побежали
if (scanDomTree(document,function(e){
      return (t.className && t.className.match(/(^|\b)xyz(\b|$)/))
    }))
{
   var e= document.getElementById('abc').style;
   e.visibility='visible' ; e.position='static';
}

Zeroglif, Мне почему-то кажется, что символы $ и ^ не входят в конструкцию \b в регулярке... Так что придется писать как здесь...

Это сообщение отредактировал(а) ksnk - 26.4.2008, 10:29

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Zeroglif

Дата 26.4.2008, 11:26 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 644
Регистрация: 22.9.2005

Репутация: 1
Всего: 66

Цитата(ksnk @ 26.4.2008, 10:29

)

Эту самую f никакой чужой дядя не написал

Чужой дядя вообще ничего и не может для меня написать по определению по той простой причине, что он не знает, что мне нужно. smile

Цитата(ksnk @ 26.4.2008, 10:29

)

Так что придется писать как здесь...

Зачем ^ и $? И \b зачем?

Цитата(ksnk @ 26.4.2008, 10:29

)

функция пробежки по дереву

Никто кроме автора скрипта не знает детально, что именно ему нужно, но предположу, что не "пробежка", вариантов много:

a) можно ли обойтись обращением непосредственно к классу, то бишь к стилю - styleSheets ?
б) нужно ли обходить все элементы - getElementsByTagName('*') ?
в) нужно ли заодно поддержать старые браузеры - all ?
г) нужно ли предусмотреть будущее - getElementsByClassName() ?
д) зачем вообще устанавливать такую зависимость (от элемента с классом), нельзя ли её упростить ?
и т.д.

ksnk

Дата 26.4.2008, 12:32 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Цитата(Zeroglif @ 26.4.2008, 11:26

)

Чужой дядя вообще ничего и не может для меня написать по определению

Чужой дядя написал jQuery настолько для этой задачи удачно, что она решается в три строчки. ;-)

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Zeroglif

Дата 26.4.2008, 13:16 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 644
Регистрация: 22.9.2005

Репутация: 1
Всего: 66

Цитата(ksnk @ 26.4.2008, 12:32

)

для этой задачи

Цитата(ksnk @ 26.4.2008, 12:32

)

настолько удачно

Цитата(ksnk @ 26.4.2008, 12:32

)

решается в три строчки

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »