9

コンテナー内の最後のものをピックアップし、.divそれにいくつかのビジネス ロジックを適用する必要があるという要件があります。ユーザーは要素を追加/削除するオプションがあるため、最後の選択は.div動的でなければなりません。.div

最初に試してみましquerySelectorAllたが、うまくいかないようでした。そこで私はそれをに変更することにしましたがgetElementsByClassName、驚くべきことに同じロジックで動作しました。2番目のもの（ ）が機能しているのに がremove_div機能しない理由を誰かが教えてくれませんか？remove_div_2

注: 私はすでに 2 番目のオプションに進んでいるため、問題の修正/解決策を探しているわけではありません。querySelectorAllオプション withが機能しない理由を知りたいだけです。

以下は私のコードです：

HTML:

<div id='container'>
    <div id='div1' class='div'>This is Div 1</div>
    <div id='div2' class='div'>This is Div 2</div>
    <div id='div3' class='div'>This is Div 3</div>
</div>
<button type='button' id='append_div'>Append Div</button>
<button type='button' id='remove_div'>Remove Div</button>
<button type='button' id='remove_div_2'>Remove Div 2</button>

JavaScript:

window.onload = function () {
    var elementToStyle = document.querySelectorAll("#container .div");
    elementToStyle[elementToStyle.length - 1].classList.add('red');

    document.getElementById('append_div').onclick = function () {
       var divToInsert = document.createElement('div');
       divToInsert.id = 'new_div';
       divToInsert.className = 'div';
       divToInsert.innerHTML = 'This is an appended div';
       document.getElementById('container').appendChild(divToInsert);
       var elToStyle = document.querySelectorAll("#container .div");
       for (i = 0; i < elToStyle.length; i++)
           elToStyle[i].classList.remove('red');
           elToStyle[elToStyle.length - 1].classList.add('red');
       };

       document.getElementById('remove_div').onclick = function () {
           var elToStyle = document.querySelectorAll("#container .div");
           document.getElementById('container').removeChild(elToStyle[elToStyle.length - 1]);
           elToStyle[elToStyle.length - 1].classList.add('red');
       };

       document.getElementById('remove_div_2').onclick = function () {
           var elToStyle = document.getElementsByClassName('div');
           document.getElementById('container').removeChild(elToStyle[elToStyle.length - 1]);
           elToStyle[elToStyle.length - 1].classList.add('red');
       };
   }
4

2 に答える 2

0

最後の除算要素を参照したい場合は、次のようにします...

var id = 'container';
var d = document.getElementById(id).getElementsByTagName('div')
var lastDiv = d[d.length - 1];

..そして、あなたのquerySelector.

于 2013-09-11T07:36:59.067 に答える