我可以按照這樣的順序選擇課程嗎？

所以我在這裏生成這個HTML由Wordpress。我想單獨選擇使用JS的DIV。這可能嗎？我可以通過JS在我的HTML中找到它們的順序來選擇它們嗎？我可以按照這樣的順序選擇課程嗎？

我試過如果這樣的事情是可能的（通過添加一個索引號），但我相信這隻用於LI元素。但你明白了。最終的結果是採用.className

var koffie = document.getElementsByClassName("g-gridstatistic-item-text2")[0]; 
 
var brain = document.getElementsByClassName("g-gridstatistic-item-text2")[1]; 
 
var tevred = document.getElementsByClassName("g-gridstatistic-item-text2")[2]; 
 

 
console.log(koffie); 
 
console.log(brain); 
 
console.log(tevred);

<div class="g-gridstatistic-wrapper g-gridstatistic-3cols"> 
 
    <div class="g-gridstatistic-item"> 
 
    <div class="g-gridstatistic-item-wrapper"> 
 
    <div class="g-gridstatistic-item-text1 odometer" data-odometer-value="4"></div> 
 
    <div class="g-gridstatistic-item-text2">Kopjes koffie per dag</div> 
 
    </div> 
 
    </div> 
 
    <div class="g-gridstatistic-item"> 
 
    <div class="g-gridstatistic-item-wrapper"> 
 
    <div class="g-gridstatistic-item-text1 odometer" data-odometer-value="14"></div> 
 
    <div class="g-gridstatistic-item-text2">Brainstormsessies per week</div> 
 
    </div> 
 
    </div> 
 
    <div class="g-gridstatistic-item"> 
 
    <div class="g-gridstatistic-item-wrapper"> 
 
    <div class="g-gridstatistic-item-text1 odometer" data-odometer-value="12"></div> 
 
    <div class="g-gridstatistic-item-text2">Tevreden klanten</div> 
 
    </div>

不同的類名添加到每個格對象

來源

2017-04-20 Melvin

您選擇了所有的元素，你想，我錯了嗎？你想做什麼？ – kalsowerus

你是對的，但我想單獨選擇它們。 – Melvin

請更精確地請 – kalsowerus

您的JavaScript代碼在檢查DOM是否已加載之前正在查找DOM元素。嘗試在一個事件監聽器包裝它，就像這樣：

document.addEventListener('DOMContentLoaded', function() { 

var koffie = document.getElementsByClassName("g-gridstatistic-item-text2")[0]; 
var brain = document.getElementsByClassName("g-gridstatistic-item-text2")[1]; 
var tevred = document.getElementsByClassName("g-gridstatistic-item-text2")[2]; 

//console.log(koffie); 
//console.log(brain); 
//console.log(tevred); 

/* to evidence that targeting works: */ 
brain.classList.add('addedClass'); 

});

CSS

.addedClass { 
    font-size:22px; 
    color:red; 
}

完整的示例在這裏： https://jsbin.com/saxizeyabo/edit?html,css,js,console,output

來源

2017-04-20 15:34:04 gnzg

工作就像一個魅力！ – Melvin

簡單地像這樣

var yourVariableName = document.getElementsByClassName("g-gridstatistic-item-text2"); 

console.log(youVariableName[0]); 
console.log(youVariableName[1]);

等像陣列

來源

2017-04-20 14:10:08

@Melvin爲你做了這個工作？ –

不，這不適合我。我試圖將它們放置在單獨的變量中，以便我可以將信息添加到對象className。運行這個只是讓我在我的控制檯中不確定。 – Melvin

document.querySelectorAll('.g-gridstatistic-item-text2').item(0);

https://developer.mozilla.org/de/docs/Web/API/Document/querySelectorAll

這樣，你可以使用CSS選擇器

來源

2017-04-20 14:10:23 devsteff

根據你的建議，我想出了這個 var koffie = document.querySelectorAll（'。g-gridstatistic-item-text2'）; koffie [0] .className + =「fa fa-coffee fa-rw」; koffie [1] .className + =「fa fa-flash fa-rw」; koffie [2] .className + =「fa fa-handshake-o fa-rw」; 它給了我錯誤TypeError：undefined不是一個對象（評估'koffie [0] .className'） – Melvin

是的，因爲它不是一個數組，它的一個對象，並使用方法項來獲取它，如圖所示。 .. – devsteff

下面的代碼應該工作。

var classes = document.getElementsByClassName('g-gridstatistic-item-text2'); 
for(var i=0; i<=classes.length; i++) { 
    var appendClass = 'your_class_name'+i; 
    classes[i].classList.add(appendClass); 
}

來源

2017-04-20 15:24:53

我可以按照這樣的順序選擇課程嗎？

回答

相關問題