Jquery не работает селектор по id

Селектор JQuery не находит идентификатор

Я бьюсь головой о проблеме селектора и надеюсь, что у кого-то есть понимание. Контекст заключается в том, что я разрабатываю расширение Mediawiki, которое добавляет некоторые специфические для предприятия функциональные возможности на страницу редактирования. Последний GA MediaWiki содержит JQuery 1.11.3.

В этом фрагменте я пытаюсь добавить раздел с динамически создаваемой таблицей. Большая часть кода работает, поэтому я уверен, что JQuery адекватно загружается в среде. Селектор, ведущий к оператору оповещения, который пытается найти текстовое поле при возможности поиска, не работает. Текстовое поле отображается на странице, а IE и Edge показывают идентификатор как то, что показано в комментариях. Селектор всегда имеет нулевую длину. Интересно, чего мне не хватает. Это способ обработки различных синтаксисов кавычек? Вы можете видеть, что я пытался упростить аспект «источник», используя источник массива, а не источник JSON, который я хочу использовать, поэтому используйте «Charl» в качестве тестовой фразы, если вы пытаетесь проверить.

2 ответа

В соответствии с документацией jQuery для селекторов вам необходимо экранировать . двумя обратными слешами \\.

Чтобы использовать любой из метасимволов (таких как! «# $% & ‘() * +,. / :; ? @ [] ^`

) В качестве литеральной части имени, должен быть экранирован двумя обратными слешами: \. Например, элемент с , может использовать селектор $ («# foo \ .bar»).

Вы должны изменить это на это

Не очень хорошая идея использовать метасимволы в селекторе. @ Гриффит правильно показал, как с ними бороться, если они существуют в селекторе. В качестве альтернативы, вместо использования селектора # вы можете использовать форму [id= ] и заключить в кавычки значение следующим образом:

Это то, что вы можете легко сделать при создании строки селектора:

Источник

Не работают селекторы jQuery

Есть страница index.php с создаваемой формой:

Форму создает нормально, все на месте, селекторы тоже на месте.

К индексу подключается app.js с таким содержанием:

И при этом не работает ни один селектор. Не задаются значения, не срабатывает функция и т.д. Вообще.

Буду очень благодарен, если кто-нибудь подскажет как можно решить возникшую проблему.

UPD — поменял, теперь .val() выводит код элемента, например А должен выводить значение..

2 ответа 2

У вас неверно прописаны id элементов, id не должен содержать символ # .

Селектор $(«#f1″) ищет элемент с id=»f1″ , а не id=»#f1» .

Перделайте php чтобы он возвращал такой html

тогда селекторы в js будут работать.

UPDATE: У вас опечатка в одном из селекторов:

Второе поле в php имеет id=»opt» (селект поле). В js коде вы пытаетесь получить $(‘#opr’) (php «opt»-> js «opr» ).

UPDATE 2: Ошибка в методе Calc:

function Calc() . Calc не получает никаких аргументов. В js можно передавать аргрументы в функции которые не собираются их получать, поэтому вызов Calc( f1, f2, opr ) внутри click не вызовет ошибок. Нужно заменить на function Calc( f1, f2, opr)

Печать f1, f2, и opr

В текущем варианте печатает узлы т.к. переменные f1, f2 и opr не существуют ни в локальной области видимости ни в глобальной. Когда js не может найти переменную ни в одной области видимости, он ищет узел с id равным названию этой переменной.

Источник

JQuery Id и селектора классов не работают [дублировать]

Использование RegExp в JavaScript может выполнить эту работу для вас, просто выполните следующее:

Если вы думаете о повторном использовании, создайте функцию, которая сделает это за вас, но это не рекомендуется, так как это только одна функция линии, но если вы сильно ее используете, вы можете написать что-то вроде этого:

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

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

6 ответов

Элемент, который вы пытались найти, не был в DOM , когда ваш скрипт работал.

Позиция вашего DOM-зависимого скрипта может оказать глубокое влияние на его поведение. Браузеры анализируют HTML-документы сверху донизу. Элементы добавляются в DOM, и сценарии выполняются (как правило), когда они встречаются. Это означает, что порядок имеет значение. Как правило, скрипты не могут найти элементы, которые появляются позже в разметке, потому что эти элементы еще не добавлены в DOM.

Рассмотрим следующую разметку; сценарий # 1 не находит

Итак, что вы должны делать? У вас есть несколько вариантов:

Вариант 1: Переместите свой скрипт

Переместите свой скрипт дальше по странице, перед закрывающим тегом тела. Организованный таким образом остальная часть документа анализируется до того, как будет выполнен ваш скрипт:

Примечание: размещение скриптов внизу как правило, считается лучшей практикой .

Вариант 2: jQuery’s ready()

Отмените свой сценарий до тех пор, пока DOM не будет полностью проанализирован, используя ready() :

Примечание. Вы можете просто привязать к DOMContentLoaded или window.onload , но у каждого есть свои оговорки. jQuery ready() предоставляет гибридное решение.

Вариант 3: Делегирование событий

Делегированные события имеют преимущество в том, что они могут обрабатывать события из элементов-потомков, которые будут добавлены в документ позже.

Когда элемент вызывает событие (при условии, что это bubbling g6], и ничто не останавливает его распространение), каждый родитель в родословной этого элемента также получает событие. Это позволяет нам привязать обработчик к существующему элементу и примерным событиям, когда они пузырятся от его потомков . даже те, которые добавлены после присоединения обработчика. Все, что нам нужно сделать, это проверить событие, чтобы узнать, был ли он поднят нужным элементом и, если да, запустите наш код.

jQuery on() выполняет эту логику для нас. Мы просто предоставляем имя события, селектор для желаемого потомка и обработчик событий:

Примечание: Обычно этот шаблон зарезервированы для элементов, которые не существовали во время загрузки или , чтобы избежать прикрепления большого количества обработчиков. Также стоит отметить, что, пока я прикреплял обработчик к document (для демонстрационных целей), вы должны выбрать ближайшего надежного предка.

Вариант 4: Атрибут defer

Используйте атрибут defer в click me

Для справки, вот код из этого внешнего скрипта :

Примечание: атрибут defer , безусловно, кажется , как волшебная пуля , но важно знать об оговорках . 1. defer может использоваться только для внешних скриптов, т. е. для тех, у кого есть атрибут src . 2. знать о поддержке браузера , то есть: ошибка реализации в IE & lt; 10

Короткие и простые: поскольку элементы, которые вы ищете, не существуют в документе (пока).

В оставшуюся часть этого ответа я буду использовать getElementById как пример, но то же самое относится к getElementsByTagName , querySelector и любому другому методу DOM, который выбирает элементы.

Есть две причины, по которым элемент может не существовать:

1. Элемент с переданным идентификатором действительно не существует в документе. Вы должны дважды проверить, что идентификатор, который вы передаете на getElementById , действительно соответствует идентификатору существующего элемента в (сгенерированном) HTML и что у вас не было с ошибкой идентификатор (идентификаторы чувствительный !). Кстати, в большинстве современных браузеров , которые реализуют методы querySelector() и querySelectorAll() , нотация стиля CSS используется для извлечения элемента его id , например: document.querySelector(‘#elementID’) , в отличие от способа, с помощью которого элемент извлекается его id в [[16]; в первом символе # необходимо, во втором это приведет к тому, что элемент не будет извлечен.
2. Элемент не существует в данный момент , который вы вызываете getElementById ].

Последний случай довольно распространен. Браузеры анализируют и обрабатывают HTML сверху вниз. Это означает, что любой вызов элемента DOM, который встречается до появления этого элемента DOM в HTML, не будет выполнен.

Рассмотрим следующий пример:

Появляется div после script . В настоящий момент сценарий выполняется, элемент не существует , но и getElementById вернут null .

То же самое относится к все селекторы с jQuery. jQuery не найдет элементов, если вы ошибочно написали ваш селектор, или вы пытаетесь выбрать их , прежде чем они на самом деле существуют .

Добавленный поворот — это когда jQuery не найден потому, что вы загрузили скрипт без протокола и запускаетесь из файловой системы:

этот синтаксис используется, чтобы позволить сценарию загружаться через HTTPS на странице с протоколом https: // и для загрузки HTTP-версии на странице с протоколом http: //

У этого есть неудачный побочный эффект попытки и невозможность загрузить file://somecdn.somewhere.com.

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

Это может быть обеспечено просто добавив ваш JavaScript после к соответствующему элементу DOM

, и в этом случае вы также можете поместить код непосредственно перед тегом закрывающего тела (

Источник

Не работает селектор по атрибуту и его значению.

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Доступ к атрибуту класса по его порядковому номеру
Имеется структура, нужно осуществить доступ к каждому её атрибуту по его порядковому номеру. .

Не работает селектор по id
День добрый, у меня есть var currentProgramBySelect = $(‘#’+selectedProgramInSelect+’]’); и оно не.

Вот так заработало, спасибо! Только почему так по разному пишется? Я в dreamweawer пишу.

Что по разному пишется? Селекторы?

Почему в таком виде у меня не работает
$(«[title=’Яндекс почта’]»).css(‘backgroundColor’,’green’).css(‘color’,’white’)

Этот первый вариант дан преподавателем и так учат на курсе а он не работает.

) в CSS. Какого его назначение?
Здравствуйте, подскажите значение селектора «тильда» в CSS. Гугл читал, но ответ не понял. Вопрос.

В хроме не работает селектор
Ловлю событие onclick вот так: $(‘select.opt_item_price option’).click(function()<>); в.

Не работает селектор body
Начал разбираться с jQuery, испытываю самые основы основ. Начал вот с такого: .

Почему не работает селектор?
Здравствуйте! Не подскажете, почему не выводятся значения в селекторе? Есть такой код (а точнее.

Селектор :eq() работает через раз
Добрый день и хорошего настроения, товарищи программисты! Объясните мне, пожалуйста, почему.

Выбор элемента по атрибуту data-number, код есть, не могу понять почему не работает как нужно!
Всем привет! Товарищи, помогите, столкнулся с проблемой. У меня есть map в котором лежат area, у.

Источник

jQuery для начинающих. Часть 4. Селекторы

Последнее время мне всё чаще задают вопрос как выбрать тот или иной элемент в DOM’е, и данный пост будет сплошь посвящен селекторам в jQuery, возможно большинство из них Вы видели в различных источниках, но собрать их воедино все же стоит…

Во всех примерах используется сокращенный вариант вызова jQuery методов, используя функцию $ (знак доллара)

Селекторы в jQuery базируются на CSS селекторах, а так же поддерживают XPath. Дабы не закапываться в документацию буду приводить примеры, много примеров. Но начнем с самых азов…

Для начала нам понадобиться макет HTML странички (вполне типичный макет):

div id = «header» >
h1 > a href = «/» title = «homepage» > Title / a > / h1 >
h2 > Sub-title span > small description / span > / h2 >
/ div >
div id = «wrapper» >
div id = «content» >
div class = «post» >
h3 > Post Title / h3 >
p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. / p >
span > Image Title / span >
img src = «/image1.jpg» alt = «Image Alt Text» / >
p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. / p >
span class = «inner-banner» > Banner Text / span >
p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. / p >
/ div >
span id = «banner» > img src = «/banner1.jpg» alt = «Big Banner» / > / span >
div class = «post» >
h3 > Post Title / h3 >
p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. / p >
span > Image Title / span >
img src = «/image2.jpg» alt = «Image Alt Text» / >
p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. / p >
span class = «inner-banner» > Banner Text / span >
p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. / p >
/ div >
/ div >
/ div >
div id = «sidebar» >
ul >
li > a href = «/item0.html» > Menu Item 0 / a > / li >
li > a href = «/item1.html» > Menu Item 1 / a > / li >
li > a href = «/item2.html» > Menu Item 2 / a > / li >
li > a href = «/item3.html» > Menu Item 3 / a > / li >
/ ul >
/ div >
div id = «footer» >
Copyright © 2008
/ div >

А теперь приступим к выборкам:

Выбор элементов по Id либо ClassName аналогично используемому в CSS

$ ( ‘#sidebar’ ) ; // выбор элемента с id = sidebar
$ ( ‘.post’ ) ; // выбор элементов с class = post
$ ( ‘div#sidebar’ ) ; // выбор элемента div с id = sidebar
$ ( ‘div.post’ ) ; // выбор элементов div с class = post

Примечание: используйте валидные имена классов и id

Бродим по иерархии объектов в DOM’е

Простой выбор потомков:

$ ( ‘div span’ ) ; // выбор всех span элементов в элементах div

Аналогичный результат так же можно получить используя следующую конструкцию:

$ ( ‘div’ ) . find ( ‘span’ ) ; // выбор всех span элементов в элементах div

Выбор только непосредственных потомков

$ ( ‘div > span’ ) ; // выбор всех span элементов в элементах div, где span является прямым потомком div’a

Как же лучше поступить, что работает быстрее? Надо бы протестировать…

Так же селекторы можно группировать:

$ ( ‘div, span’ ) ; // выбор всех div и span элементов

Поиск по соседям:

$ ( ‘span + img’ ) ; // выбор всех img элементов перед которыми идут span элементы
$ ( ‘span

img’ ) ; // выбор всех img элементов после первого элемента span
$ ( ‘#banner’ ) . prev ( ) ; // выбор предыдущего элемента от найденого
$ ( ‘#banner’ ) . next ( ) ; // выбор следующего элемента от найденого

Выбор всех элементов, всех предков, всех потомков

$ ( ‘*’ ) ; // выбор всех элементов
$ ( ‘p > *’ ) ; // выбор всех потомков элементов p
$ ( ‘p’ ) . children ( ) ; // —
$ ( ‘p’ ) . parent ( ) ; // выбор всех прямых предков элементов p
$ ( ‘* > p’ ) ; // выбор всех предков элементов p (скорей всего Вам не понадобится)
$ ( ‘p’ ) . parents ( ) ; // —
$ ( ‘p’ ) . parents ( ‘div’ ) ; // выбор всех предков элемента p которые есть div (parents принимает в качестве параметра селектор)

Фильтры

$ ( ‘div:first’ ) ; // выбираем первый div в доме
$ ( ‘div:last’ ) ; // выбираем последний div в доме
$ ( ‘div:not(.red)’ ) ; // выбираем div’ы у которых нету класса red
$ ( ‘div:even’ ) ; // выбираем четные div’ы
$ ( ‘div:odd’ ) ; // выбираем нечетные div’ы
$ ( ‘div:eq(N)’ ) ; // выбираем div идущим под номером N в DOMe
$ ( ‘div:gt(N)’ ) ; // выбираем div’ы, индекс которых больше чем N в DOMe
$ ( ‘div:lt(N)’ ) ; // выбираем div’ы, индекс которых меньше чем N в DOMe
$ ( ‘:header’ ) ; // выбо заголовоков h1, h2, h3 и т.д.
$ ( ‘div:animated’ ) ; // выбор элементов с активной анимацией

Фильтры по контенту и видимости:

$ ( ‘div:contains(text)’ ) ; // выбираем div’ы содержащие текст
$ ( ‘div:empty’ ) ; // выбираем пустые div’ы
$ ( ‘div:has(p)’ ) ; // выбираем div’ы которые содержат p
$ ( ‘div.red’ ) . filter ( ‘.bold’ ) // выбираем div’ы которые содержат класс red и класс bold
$ ( ‘div:hidden’ ) ; // выбираем скрытые div’ы
$ ( ‘div:visible’ ) ; // выбираем видимые div’ы

Так же есть фильтры по атрибутам:

$ ( «div[id]» ) ; // выбор всех div с атрибутом id
$ ( «div[title=’my’]» ) ; // выбор всех div с атрибутом title=my
$ ( «div[title!=’my’]» ) ; // выбор всех div с атрибутом title не равного my
$ ( «div[title^=’my’]» ) ; // выбор всех div с атрибутом title начинающихся с my
//

так же стоит отдельно отметить следующий фильтр:

=’external’]» ) ; // выбор всех A с атрибутом rel содержащим external в списке значений разделенных пробелом

В результате его работы будут выбраны следующие теги:

a href = «» rel = «external» > link / a > — да
a href = «» rel = «nofollow external» > link / a > — да
a href = «» rel = «external nofollow» > link / a > — да
a href = «» rel = «friend external follow» > link / a > — да
a href = «» rel = «external-link» > link / a > — нет

Для работы с элементами форм есть ряд селекторов позволяющий выбирать по типу элемента и фильтров — enabled/disabled/selected/checked:

$ ( «:text» ) ; // выбор всех input элементов с типом =text
$ ( «:radio» ) ; // выбор всех input элементов с типом =radio
// и так далее
$ ( «input:enabled» ) ; // выбор всех включенных элементов input
$ ( «input:checked» ) ; // выбор всех отмеченных чекбоксов

Фильтры так же можно группировать:

$ ( «div[name=city]:visible:has(p)» ) ; // выбор видимого div’a с именем city, который содержит тег p

Приведу так же ряд полезных селекторов для работы с элементами форм:

$ ( «form select[name=city] option:selected» ) . val ( ) ; // получение выбранного(-ых) элементов в селекте city
$ ( «form :radio[name=some]:checked» ) . val ( ) ; // получение выбранного значения радиобатона с именем some
$ ( «form :checkbox:checked» ) ; // выбор всех выбранных чекбоксов

Если Вам хочеться опробывать как это все работает — то для этого можете воспользоваться тестовой страничкой

Слайды

Как-то слишком много текста получилось, пожалуй пора показывать слайды 😉

Источник