jQuery는 형제 자매 요소를 제거하고 IE7에서는 작동하지 않습니다
-
05-07-2019 - |
문제
특정 DIV 후에 모든 형제 자매 요소를 제거하려고합니다. ID = ID8이있는 DIV 태그라고 가정 해 봅시다.
<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>
그렇게하기 위해 jQuery에서 다음 코드를 사용합니다.
$("#id8 ~ div").remove();
Firefox에서는 잘 작동하지만 IE7에서는 작동하지 않습니다.
jQuery를 사용하여 요소를 제거하고 싶은 요소에서 태그 ID를 제공하는 대안적인 방법이 있습니까? 감사
도움을 주셔서 감사합니다.
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();
}
}
그냥 전화하십시오
removeAfter('id8', 'div')
해결책
여기에 세 단계 :
- 부모와 관련하여 클릭 한 요소의 색인 번호를 찾으십시오.
- 우리가 방금 찾은 후 시작 하여이 부모 내에 포함 된 모든 div 요소를 루프합니다.
발견 된 각 DIV를 삭제하십시오
$(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(); } }); });
이것은이 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>
문제에 더 많은 문제가 있다면 여기에 의견을 제시하십시오!
추신 PS 귀하의 요청에 대한이 솔루션의 응용 프로그램은 다음과 같습니다.
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();
}
};
다른 팁
두가지!
1) 닫으십시오u003Cdiv> 태그! 다음과 같아야합니다.
<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) ~ 연산자는 일치하는 요소를 따르는 형제 자매와 만 일치합니다 (즉, 일치합니다. ID3, ID97, ID7 그리고 Idn, 하지만 ID5). 포함하여 모든 형제와 일치합니다 ID5, 당신은 이것을합니다 :
$("#id8").siblings("div").remove();
그것은 당신을 만 남겨야합니다 ID8. 나는 이것을 Firefox 3.5.5와 IE7.0Something에서 테스트했습니다. 도움이되기를 바랍니다!
편집하다:
문제에 대한 해결책을 추가하려면 아래 답변을 편집하십시오.
$("#id8").nextAll().remove();
최종 편집.
확인. 이것은 흥미로운 버그 인 것 같습니다. 초기 테스트는 어디에서나 특정 언급을 찾지 못했지만 jQuery 버그임을 나타냅니다.
버그는 초기 선택기 태그가 형제 자매와 같은 유형이라면 IE7의 형제 자매를 반환하지 못하는 것 같습니다.
선택기 자체에 대한 jQuery 예제 코드를 사용하여 테스트했으며 IE8 Emulating IE7에서 문제를 복제 할 수있었습니다.
jQuery 예제 코드를 확인하면 아래에 고착 할 것입니다. 초기 선택기로 사용하는 실제 요소가 span
그리고 형제 요소는 모두입니다 divs
Whcih는 그들이이 버그에 대해 알고 있었고 문서화하지 않았다는 것을 나타내는 것처럼 보인다.
<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>
변경 #prev span
a div
그리고 당신은 현재 얻는 것과 같은 실패를 얻을 수 있습니다. jQuery 팀과 함께 버그를 제출했습니다.