with - operator jquery selector




Acesse o seletor “: after” do css com jQuery (2)

Eu tenho o seguinte css:

.pageMenu .active::after {
    content: '';
    margin-top: -6px;
    display: inline-block;
    width: 0px;
    height: 0px;
    border-top: 14px solid white;
    border-left: 14px solid transparent;
    border-bottom: 14px solid white;
    position: absolute;
    right: 0;
}

Gostaria de alterar a largura da borda superior, esquerda e inferior usando jQuery. Qual seletor eu uso para acessar esse elemento? Eu tentei o seguinte, mas não parece estar funcionando.

$('.pageMenu .active:after').css(
        {
            'border-top-width': '22px',
            'border-left-width': '22px',
            'border-right-width': '22px'
        }
    )

Se você usar o after() interno do jQuery com o valor vazio, ele criará um objeto dinâmico que corresponderá ao seu :after seletor CSS.

$('.active').after().click(function () {
    alert('clickable!');
});

Veja a documentação do jQuery .


Você não pode manipular :after , porque não é tecnicamente parte do DOM e, portanto, é inacessível por qualquer JavaScript. Mas você pode adicionar uma nova classe com um novo :after especificado.

CSS:

.pageMenu .active.changed:after { 
/* this selector is more specific, so it takes precedence over the other :after */
    border-top-width: 22px;
    border-left-width: 22px;
    border-right-width: 22px;
}

JS:

$('.pageMenu .active').toggleClass('changed');

ATUALIZAÇÃO: embora seja impossível modificar diretamente o :after conteúdo, existem maneiras de ler e / ou substituí-lo usando JavaScript. Consulte "Manipulando pseudo-elementos CSS usando jQuery (por exemplo: antes e depois)" para obter uma lista abrangente de técnicas.







jquery-selectors