用兩個選擇器選擇一個元素

我想選擇一個類上的元素，把它們放在一個數組上。對於該類中的每個元素，我想選擇「a」標記，然後我想爲每個元素創建一個監聽器，但這對JS來說似乎不可能。下面是我迄今爲止的代碼。用兩個選擇器選擇一個元素

var elemento = new Array(); 
var y=document.getElementsByClassName("thumbnails"); 

for (var i=0; i < y.length; i++) { 
    elemento = (y[i].getElementsByTagName("a")); 
    elemento[0].addEventListener('click', function(){alert("jo")}, false); 
}

本工程爲第一要素，但不是休息，是的，是ELEMENTO因爲[0]有每個縮略圖裏面沒有更多的「一」的標籤。

來源

2013-12-23 user3129738

我推薦使用[jQuery的]（http://jquery.com/）：'$（ '縮略圖' ）.click（function（）{...}）' –

不要使用像jQuery這樣的大型庫來完成這些超級簡單的小任務。 –

會請顯示html嗎？我相信你的代碼非常好。 – theBeacon

一個現代瀏覽器短路的方法是使用CSS選擇在querySelector：

var elements = document.querySelectorAll('.thumbnails a'); 
for (var i = 0, len = elements.length; i < len; i++) { 
    elements[i].addEventListener('click', function() { ... }, false); 
}

DEMO：http://jsfiddle.net/AApw2/

來源

2013-12-23 14:49:45 VisioN

速度快，並且像魅力一樣工作............：S – user3129738

雖然.querySelectorAll是一個很好的解決方案，瞭解如何做到這一點的處理是很重要的沒有它。

您只需要一個內循環來循環變量elemento變量所保存的當前元素集a。

var elemento; 
var y = document.getElementsByClassName("thumbnails"); 
var handler = function(){alert("jo")}; 

for (var i=0; i < y.length; i++) { 
    elemento = y[i].getElementsByTagName("a"); 
    for (var j = 0; j < elemento.length; j++) { 
     elemento[j].addEventListener('click', handler, false); 
    } 
}

請注意，我用不同的計數器j爲內環，因爲i已在使用。

另請注意，我將處理函數移到了循環外的變量中。這使得所有的元素使用相同的函數對象，這是更高效的。

旁註：

您可能還需要創建一些輔助方法，將縮短長方法名稱，並將其轉換爲陣列。這使您可以使用數組方法，如.forEach()。

var _slice = Function.call.bind([].slice); 

function byClass(ctx, clss) { 
    if (typeof ctx === "string") { 
     clss = ctx; 
     ctx = document; 
    } 
    return _slice(ctx.getElementsByClassName(clss)); 
} 
function byTag(ctx, tag) { 
    if (typeof ctx === "string") { 
     tag = ctx; 
     ctx = document; 
    } 
    return _slice(ctx.getElementsByTagName(tag)); 
}

這降低了代碼這樣：

var handler = function(){alert("jo")}; 

byClass("thumbnails").forEach(function(thumb) { 
    byTag(thumb, "a").forEach(function(a) { 
     a.addEventListener('click', handler, false); 
    }); 
});

來源

2013-12-23 14:55:41

同時也是一種魅力！沒有Jquery ........你都是親！：P – user3129738

我懷疑'NodeList'有'Array.prototype.forEach'方法可用。你最好先用'Array.prototype.slice'將它轉換爲純數組。 – VisioN

foreach notworking ....第一種方法是 – user3129738

用兩個選擇器選擇一個元素

回答

相關問題