Faz parafuso de ID duplicado até seletores jQuery?

Question

Se eu tivesse duas divs, ambos com id = "myDiv"

Será que $("#myDiv").fadeOut(); desaparecer ambos os divs fora? Ou seria desaparecer apenas o primeiro / segundo? Ou nenhum?

Como faço para alterar a que ele desaparece?

Nota: Eu sei duplicado id é contra normas, mas eu estou usando o popup modal fancybox e ele duplica conteúdo especificado na sua página para o conteúdo do popup. Se alguém sabe uma maneira de contornar isso (talvez eu estou usando fancybox errado) por favor me avise.

Answer 1

jQuery corresponde exatamente um elemento ao consultar para um ID. Uma matriz de, no máximo, um objecto Element será devolvido por $("#foo").get(). Veja a jQuery documentação para mais informações, ou tente você mesmo.

$(function() {
    alert($("#foo").length);
});

Answer 2

Elemento IDs devem ser únicos. Tendo vários DIVs do mesmo ID seria incorreto e imprevisível, e desafia o propósito da ID. Se você fez isso:

$('.myDiv').fadeOut();

Isso iria desaparecer ambos para fora, supondo que você dar-lhes uma classe de myDiv e IDs únicas (ou nenhum).

Answer 3

"Nota: Eu sei duplicado id é contra padrões"

Então não fazê-lo. Você já descobriu dois problemas. Ele viola os padrões, e interfere com (e de fato do DOM regular) mecanismo de seleção do jQuery. Provavelmente haverá mais problemas no futuro.

Muito possivelmente, você são usando fancybox errado, caso em que eu espero que alguém familiarizado com ele te ajuda. Ou pior, se o script em si é falho, você não deve usá-lo.

Answer 4

Desde $ ( '# myDiv') só irá retornar o primeiro div com esse ID, você terá que encontrar todos os elementos com que ID usando este truque:

$('[id=myDiv]');

Assim, para o seu caso, para aplicar o fadeOut a todas essas divs:

$('[id=myDiv]').fadeOut();

E se você quer ter certeza de sua página não tem esse ID duas vezes, em seguida, você pode remover os extras, fazendo isso:

$('[id=myDiv]:gt(0)').remove();

Answer 5

Você também pode ir a rota de usar find (). encontrar retornará todos os elementos com esse ID, e você pode limitar o escopo para um pai especial, se necessário tentar algo como $(document).find('#myDiv').fadeOut();

ou

$('.parentElement').find('#myDiv').fadeOut();

Answer 6

Eu corri para o mesmo problema. Aparentemente, quando você cria conteúdo da página a partir do qual você deseja abrir um FancyBox, ele cria um div espelho do conteúdo original. Na minha exemplo, os controles foram envoltos em uma div que fancybox cria nomeado, "fancy_div"

Eu era capaz de selecionar o controle e obtê-lo de valor usando o seguinte formato para o seletor:

$ ( '# fancy_div [id = InputText]') val ();.

seus controles podem existir em outros lugares dentro do FancyBox. a melhor coisa a fazer é olhar para o viewsource, mas é complicado.

Para chegar ao ver fonte, use a seguinte técnica: Coloque esta etiqueta em seu formulário: Obter valor Abra o formulário, clique no tag para abrir a janela de alerta.
Verifique se o seu cursor estiver dentro do conteúdo da página (encontrar um controle e clique).
Botão direito do mouse fora do controle e selecione "view source".
Um monte de divs existe, então olhar para a div que contém o conteúdo.

Espero que isso ajude.

Answer 7

Recentemente, tive um problema semelhante. Eu tive uma única página que exibia conteúdo diferente através de uma carga Ajax. Existe um botão que aciona o servidor para gerar uma imagem de PDF.

A minha solução original era usar um seletor de classe, que funcionou bem, mas causou atrito com outro desenvolvedor. Havia tantas classes já nos links que o uso de uma classe como um identificador fizeram o código feio. Então eu usei um atributo de nome:

<a name="printButton"....

$('a[name="printButton"]').on('click',function(){....

Trabalhou! Apenas dandy