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')
解決
ここに3つのステップ:
- クリックした要素のインデックス番号を、その親に関して見つけます。
- この親内に含まれるすべての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();
}
};
他のヒント
2つのこと!
1)<!> lt; div <!> gt;を閉じます。タグ!次のようになります。
<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.0でテストしました。役に立てば幸いです!
編集:
以下の回答を編集して、問題の解決策を追加します。
$("#id8").nextAll().remove();
編集の終了。
わかりました。これは興味深いバグのようです-最初のテストではjqueryバグであることを示しているようですが、具体的な言及はどこにもありません。
バグは、最初のセレクタタグがその兄弟と同じタイプである場合、IE7で兄弟を返すことができないということです。
セレクター自体のjQueryサンプルコードを使用してテストし、IE7をエミュレートするIE8で問題を再現できました。
jqueryのサンプルコードを確認すると、最初のセレクタとして使用している実際の要素はspan
であり、兄弟要素はすべてdivs
であることがわかります。彼らはこのバグについて知っていて、それを文書化していない。それはcであり、くだらないものである。
<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
をdiv
に変更すると、現在と同じ障害が発生します。 jqueryチームにバグを送信します。