Вложенные реквизиты в styleled-компонентах дают ошибку Typescript

Вы должны понимать, что jQuery работает с деревом HTML DOM на стороне клиента. jQuery не работает непосредственно с компонентами JSF, как вы писали в исходном коде JSF, но jQuery работает непосредственно с деревом HTML DOM, которое создается этими компонентами JSF. Вам нужно открыть страницу в webbrowser и rightclick, а затем View Source . Вы увидите, что JSF добавляет идентификатор сгенерированных входных элементов HTML с идентификаторами всех родительских компонентов NamingContainer (таких как , и т. Д.) С : как разделитель по умолчанию. Так, например,


    
    ...

закончится сгенерированным HTML как

...

. Вместо этого вам нужно выбрать элементы точно . Однако : является особым символом в CSS-идентификаторах, представляющих псевдоселектор. Чтобы выбрать элемент с идентификатором : в идентификаторе с помощью селекторов CSS в jQuery, вам нужно либо избежать его с помощью обратного слэша, либо использовать селектор атрибутов [id=...] или просто использовать старый getElementById():

var $element1 = $("#foo\\:bar");
// or
var $element2 = $("[id='foo:bar']");
// or
var $element3 = $(document.getElementById("foo:bar"));

Если вы видите автогенерированную часть j_idXXX в идентификаторе, где XXX представляет инкрементное число, тогда вы должны указать конкретному компоненту фиксированный идентификатор, поскольку инкрементное число является динамическим и может быть изменено в зависимости от того, физическое положение в дереве.


. В качестве альтернативы вы также можете просто использовать имя класса:


, которое заканчивается в HTML как


, чтобы вы могли получить его как

var $elements = $(".someClassName");

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


Как еще одна альтернатива, вы могли бы просто пройти сам элемент HTML DOM в функцию:


function someFunction(element) {
    var $element = $(element);
    // ...
}

См. также:

1
задан Jake Ranallo 4 March 2019 в 05:54
поделиться