4

次の問題があります。1つのスクリプトをダウンロードすると、divの本体からすべての画像が読み込まれます。ここにもう1つ画像を追加したいのですが、これはスクリプトによって処理されません。

コードでは次のようになります。

<div id="myGallery0" class="spacegallery">
<img src=ADDITIONAL.jpg alt="" atr1="1" />  
<img src=images/bw1.jpg alt="" atr1="1" />
<img src=images/bw2.jpg alt="" atr1="2" />
<img src=images/bw3.jpg alt="" atr1="3" />
</div>

だから私の質問は、jqueryで「ADDITIONAL.jpg」を除くこれらすべての画像をどのように選択するかです。

2番目の質問は、GetElementsBy関数の1つを使用して、自然なJavaScriptでそれを選択する方法です。

4

4 に答える 4

6

:not()疑似と:firstセレクターの組み合わせを使用できます。

var $images = $('#myGallery0').find('img:not(:first)');

HTML5と一緒の私のバニラjsソリューションは次のようになると思います：

var images = document.getElementById('myGallery0').querySelectorAll('img');

images = Array.prototype.filter.call(images, function( node, idx ) {
    return idx > 0;
});

アップデート：

また、この特定の例では、jQueryがより.slice(1)セクシー（そしてより高速）であることに同意します。

var $images = $('#myGallery0 img').slice(1);

ただし、これは最初のアイテムをカットする場合にのみ機能します。これらの疑似セレクターを使用すると、簡単に切り取ることができます。たとえば、を使用するような2番目のノードを考えてみましょうimg:not(:eq(1))。これはで可能ですが.slice()、そうすることははるかに難しいでしょう。

于 2012-04-27T09:16:08.953 に答える
5

生のJavaScript

生のJavaScriptバージョンは、最初のものを使用document.getElementByIdしElement#getElementsByTagNameてスキップします。

var list, images = [], index;
list = document.getElementById("myGallery0").getElementsByTagName("img");
for (index = 1; index < list.length; ++index) {
    images.push(list[index]);
}
// Use the `images` array

でループを開始するとindex = 1、最初のループがスキップされます（これはindex = 0）。

または、非常に注意が必要な場合もありますが、ターゲットブラウザで徹底的にテストします。

var images = Array.prototype.slice.call(
    document.getElementById("myGallery0").getElementsByTagName("img"),
    1);

これが機能するのは、仕様によれば、メソッドの仕様にリストされている操作をサポートしている限り、操作対象のオブジェクトを配列以外のものにする必要があるためです。そして、によって返されるので、それを値として渡し、インデックス1で始まるスライスが必要であることを伝えることができます。ただし、仕様には「...関数をに正常に適用できるかどうか」も明確に示されていることに注意してください。ホストオブジェクトは実装に依存します。」およびはホスト提供のオブジェクトであるため、ターゲット環境で徹底的にテストすることをお勧めします。Array.prototype.slice sliceNodeListgetElementsByTagNamesliceNodeListthissliceNodeList

jQuery

jQueryには、それを行う方法がたくさんあります。私のお気に入りは、おそらくRuiが指摘したものですslice。

var images = $("#myGallery0 img").slice(1);
于 2012-04-27T09:21:25.340 に答える
4

ちょうど別のオプション:

$('#myGallery0 img').slice(1)
于 2012-04-27T09:19:16.093 に答える
0

sliceメソッドを使用して、結果の一部を取得できます。

$('#myGallery0 img').slice(1)

プレーンな Javascript バージョンも同様で、要素コレクションを配列に変換するトリックがあります。

Array.prototype.slice.call(
  document.getElementById('myGallery0').getElementsByTagName('img')
).slice(1)
于 2012-04-27T09:22:59.867 に答える