CODEWITHSUNDEEP
javascriptjquery
pigusan
pigusan

Reputation: 99

Select all the elements that have a particular id AND class

(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

Answers (3)

Akhil
Akhil

Reputation: 629

You can and the selectors by concatenating both id and class name.

var selectChoices = document.querySelectorAll('#translateBoxCover.choices');

Upvotes: 1

sauntimo
sauntimo

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 ids 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

Rama Schneider
Rama Schneider

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

Related Questions