jQuery는 형제 자매 요소를 제거하고 IE7에서는 작동하지 않습니다

StackOverflow https://stackoverflow.com/questions/1803449

문제

특정 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 팀과 함께 버그를 제출했습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top