在没有jquery的情况下，如何在div中选择特定的双重嵌套元素？

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-selector按类名选择元素。使用class=..而不是id=...。

更正代码，使用document.querySelectorAll (演示： )。

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);
}

如果要选择此结构中的所有图像，请使用[id^="slider-"]替换#slider-1。此结构是id="slider-1"、id="slider-2"、...

Answer 2

可能不是最优雅的解决方案，但它是有效的。为了演示，我用span标记替换了img标记。我还给了最后两个跨度标签一个不同的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;
}