Question

我正在使用一个名为swipeview的脚本在页面上放置多个图库实例。它生成如下结构：

<div id="slider-1">
    <div id="swipeview-slider">
        <div id="swipeview-masterpage">
            <img src="images/01.jpg" id="one"/>
        </div>
        <div id="swipeview-masterpage" class="swipeview-active">
            <img src="images/02.jpg" id="two"/>
        </div>
    </div>
</div>
<div id="slider-2">
    <div id="swipeview-slider">
        <div id="swipeview-masterpage">
            <img src="images/01.jpg" id="one"/>
        </div>
        <div id="swipeview-masterpage" class="swipeview-active">
            <img src="images/02.jpg" id="two"/>
        </div>
    </div>
</div>

每张图片唯一独有的是顶级div ID（slider-1，slider-2）。

如果不使用jQuery，如何在“swipeview-active”类中获取每个单独图像的ID？

使用jQuery，我会用这些内容选择它们：

$('#slider-1 > .swipeview-slider > .swipeview-masterpage .swipeview-active > img ').attr('id');

如何在常规的js中实现这一目标？

Answer 1

首先： ID不得以数字开头。
dot - 选择器按类名选择元素。使用class=..代替id=...。

使用document.querySelectorAll修正了代码（演示：http://jsfiddle.net/rGAkm/3/ ）。

var images = document.querySelectorAll('#slider-1 > .swipeview-slider > .swipeview-masterpage .swipeview-active > img[id]');
var len = images.length;
var output = document.getElementById('output');
for (var i=0; i<len; i++) {
    var image = images[i];
    output.appendChild(image);
}

如果您要选择此结构中的所有图片（#slider-1，[id^="slider-"]，...

，请将id="slider-1"替换为id="slider-2"

Answer 2

可能不是最优雅的解决方案，但它确实有效。我将img标记替换为span标记以进行演示。我还给了最后两个span标签一个不同的id，并添加了一个额外的标签，以显示它适用于任意数量的跨度（图像）的两个根滑块div。希望它有所帮助。
http://jsfiddle.net/vNqhd/3/

HTML：

<div id="slider-1">
    <div id="swipeview-slider">
        <div id="swipeview-masterpage">
            <span id="one">img1</span>
        </div>
        <div id="swipeview-masterpage" class="swipeview-active">
            <span id="two">img2</span>
        </div>
    </div>
</div>
<div id="slider-2">
    <div id="swipeview-slider">
        <div id="swipeview-masterpage">
            <span id="three">img3</span>
        </div>
        <div id="swipeview-masterpage" class="swipeview-active">
            <span id="four">img4</span>
        </div>
        <div id="swipeview-masterpage" class="swipeview-active">
            <span id="five">img5</span>
        </div>
    </div>
</div>
<button onclick="myfunc('slider-1');">button</button>
<button onclick="myfunc('slider-2');">button</button>
<div id="msg"></div>

JS：

function myfunc(divID){
    var myVar = document.getElementById(divID);
    var imgIDs = [];
    var counter = 0;
    var str = "";

    //walk the DOM from a root div and look for img/span tags
    //and store their IDs
    while(true){
        if(myVar === undefined){ break; }
        if(myVar.getElementsByTagName('div').length > 0){
            myVar = myVar.getElementsByTagName('div')[0];
            continue;
        } else if(myVar.getElementsByTagName('span').length > 0){
            imgIDs.push(myVar.getElementsByTagName('span')[0].id);
            counter++;
            myVar = myVar.parentNode.getElementsByTagName('div')[counter];
        } else { break; }
    }
    //display results
    for(var i = 0; i < imgIDs.length; i++){
        str += imgIDs[i] + "<br/>";
    }
    document.getElementById('msg').innerHTML = str;
}

如何在没有jquery的div中选择特定的双嵌套元素？

2 个答案: