jquery Remover irmãos elementos, não funciona no IE7
-
05-07-2019 - |
Pergunta
Eu estou tentando remover todos os elementos irmãos depois de um div particular, digamos que a tag div com id = ID8.
<form>
<div id="id5">something ...<div>
<div id="id8">something ...<div>
<div id="id3">something ...<div>
<div id="id97">something ...<div>
<div id="id7">something ...<div>
...
<div id="idn">some text ...<div>
</form>
Para fazer isso eu uso o seguinte código em jQuery.
$("#id8 ~ div").remove();
Ele funciona bem no Firefox, mas ele não funciona no IE7.
Existe uma forma alternativa para archieve isso, usando jQuery e apenas dando o ID tag do elemento que eu quero começar a remover os elementos? Graças
Obrigado a todos por sua ajuda Eu acabar com esta solução com base na resposta aceite
function removeAfter(el,tag){
element = $('#'+el);
var aElements = $(tag,element.parent());
var index = (aElements.index(element));
for(i=(index+1);i<aElements.length;i++) {
$('#'+$(aElements.get(i)).attr('id')).remove();
}
}
apenas chamada
removeAfter('id8', 'div')
Solução
Três passos aqui:
- Encontre o número de índice do elemento que clicou, em relação ao seu pai.
- percorrer todos os elementos div contidas neste pais, começando depois do que acabamos encontrados
-
Excluir cada div encontrados
$(document).ready(function(){ $('#parent').children().click(function(){ var index = ($('div',$(this).parent()).index(this)); for(i=(index+1);i<$('div',$(this).parent()).length;i++){ $($('div',$(this).parent()).get(i)).hide(); } }); });
Este trabalho vontade sobre este HTML
<div id="parent">
<div id="c1">c1</div>
<div id="c2">c2</div>
<div id="c3">c3</div>
<div id="c4">c4</div>
<div id="c5">c5</div>
</div>
Comente aqui se você tem mais problemas sobre o assunto!
P.S. Uma aplicação desta solução exata para o seu pedido é o seguinte
function removeAfter(el){
element = $('#'+el);
var index = ($('*',element.parent()).index(element));
for(i=(index+1);i<$('*', element .parent()).length;i++){
$($('*', element.parent()).get(i)).hide();
}
};
Outras dicas
Duas coisas!
1) Feche o
<form>
<div id="id5">something ...</div>
<div id="id8">something ...</div>
<div id="id3">something ...</div>
<div id="id97">something ...</div>
<div id="id7">something ...</div>
<div id="idn">some text ...</div>
</form>
2) O ~ operador só corresponde irmãos que seguem o elemento correspondente (ou seja, ele irá corresponder id3 , id97 , ID7 e IDN , mas não ID5 ). Para combinar com cada irmão, incluindo ID5 , você fazer isso:
$("#id8").siblings("div").remove();
Isso deve deixá-lo com apenas ID8 . Eu testei isso no Firefox 3.5.5 e IE7.0something. Espero que ajude!
EDIT:
Editar a resposta abaixo para adicionar o que deve ser uma solução para o problema:
$("#id8").nextAll().remove();
END EDIT.
Ok. Este parece ser um bug interessante -. Teste inicial parece indicar que é um bug jquery embora eu não encontrei nenhuma menção específica lo em qualquer lugar
O bug parece ser que, se sua tag selector inicial é do mesmo tipo que seus irmãos, em seguida, ele vai deixar de devolver quaisquer irmãos no IE7.
Eu testei usando o código de exemplo jQuery para o próprio seletor e foi capaz de duplicar o seu problema no IE8 emular IE7.
Se você verificar o código de exemplo jquery eu vou ficar abaixo você pode ver que o elemento real que eles estão usando como seletor inicial é um span
e irmão elementos são todos divs
whcih parece-me indicar que eles sabem sobre este bug e não têm documentado, o que é tanto astúcia e merda.
<script>
$(document).ready(function(){
$("#prev ~ div").css("border", "3px groove blue");
});
</script>
<div>div (doesn't match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>
<div>div sibling <div id="small">div niece</div></div>
<span>span sibling (not div)</span>
<div>div sibling</div>
Alterar o #prev span
a um div
e você vai ter a mesma falha que você está recebendo atualmente. Eu enviar um bug com o time da jQuery.