我可以按照这样的顺序选择课程吗？

所以我在这里生成这个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

我可以按照这样的顺序选择课程吗？

回答

相关问题