Reputation: 99
(UPDATED). The context is the function below I am trying to get working. Am currently messing around in the console to see what's up, the first variable selectChoices
is logging an empty NodeList
. Can't seem to select all the elements that have an id of translateBoxCover
and a class of choices
.
function correctChoices() {
var selectChoices = document.querySelectorAll('#translateBoxCover .choices');
var checkChoicesArray = [];
for (var i = 0; i < selectChoices.length; i++) {
checkChoicesArray.push(selectChoices[i].textContent);
console.log(checkChoicesArray);
}
if (checkChoicesArray.join('') == '我很很很喜欢中国') {
return true;
}
}
(Updated). I have included some more context: a javascript function that removes .choices to and fro the #translateBoxCover. When a .choices is clicked it is added to the div with the id #translateBoxCover. The function correctChoices will fire when the submit button is clicked (not included) to see if the .choices text content are in the right order. Below that is the html file in question. It seems everyone agrees that I have wrongly used an id when I should be using a class?
$('.choices').on('click', function() {
var $this = $(this);
if ($this.parent().attr('id') == 'translateBoxCover') {
var index = $this.data('index');
if (index == 0) {
$this.prependTo($("#choicesWrapper"));
} else {
$this.insertAfter($("#choicesWrapper .choices").eq(index-1));
}
} else {
$this.data('index', $this.index());
$this.appendTo("#translateBoxCover");
}
});
<div id = 'translateBoxWrapper'>
<div id = 'translateBox'>
<div id = 'translateBoxCover'></div>
</div>
</div>
<div id = 'choices'>
<div id = 'choicesWrapper'>
<div class = 'choices'>很</div>
<div class = 'choices'>中国</div>
<div class = 'choices'>美国</div>
<div class = 'choices'>爱</div>
<div class = 'choices'>喜欢</div>
<div class = 'choices'>我</div>
<div class = 'choices'>很</div>
<div class = 'choices'>很</div>
<div class = 'choices'>他</div>
<div class = 'choices'>川普</div>
<div class = 'choices'>厕所</div>
<div class = 'choices'>想</div>
<div class = 'choices'>你</div>
</div>
</div>
Upvotes: 0
Views: 1548
Reputation: 629
You can and the selectors by concatenating both id and class name.
var selectChoices = document.querySelectorAll('#translateBoxCover.choices');
Upvotes: 1
Reputation: 1591
You can use ids and classes in a selector like #id.class
.
var el = document.querySelector( '#my_id.my_class' );
console.log( el );
<div class="my_class"></div>
<div class="my_class"></div>
<div id="my_id" class="my_class"> </div>
It's worth noting, as has already been pointed out, that id
s should be unique and therefore if you're using an id as a selector, you shouldn't also need a class as it is redundant.
var el = document.querySelector( '#my_id' );
console.log( el );
<div class="my_class"></div>
<div class="my_class"></div>
<div id="my_id" class="my_class"></div>
<div id="another_id" class="my_class"></div>
Upvotes: 2
Reputation: 64
Edit: I misread what was being looked for. The following is true if you want a particular element by ID and more by class.
var selectChoices = document.querySelectorAll('#translateBoxCover .choices')
should read (note the comma between #translateBoxCover and .choices):
var selectChoices = document.querySelectorAll('#translateBoxCover, .choices')
Upvotes: -1