CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
Emrys
Emrys

Reputation: 17

Jquery selector with variables and find

I want to write a Jquery selector that uses a variable to add an active class to a list item.

The variable sv is either 'dom-site' or 'int-site' which corresponds to the id of a list item. The html looks like this:

<ul class="">
  <li id="int-site" data-display="International" data-site="https://cms.csu.edu.au/study/international/home" class="cohort-select" tabindex="0">international student information</li>
  <li id="dom-site" data-display="Domestic" data-site="https://cms.csu.edu.au/study-futurestudents/home" class="cohort-select" tabindex="0">domestic (Aust/NZ) student information</li>
</ul>

My Jquery is this:

$('div[id$="cohort-switch"] ul').find('li[id*="+sv+"]').addClass('active');

Upvotes: 0

Views: 77

Answers (6)

Tiago Pereira
Tiago Pereira

Reputation: 175

$('#'+svg).addClass('active');

That simple

Upvotes: 2

Deepak A
Deepak A

Reputation: 1636

Assuming you haven't used the same id elsewhere, you can simply try $('#'+sv).addClass('active') . If you want to add class to the last list item the use $('li:last').addClass('active')

var sv ='dom-site'
$('#'+sv).addClass('active');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="">
  <li id="int-site" data-display="International" data-site="https://cms.csu.edu.au/study/international/home" class="cohort-select" tabindex="0">international student information</li>
  <li id="dom-site" data-display="Domestic" data-site="https://cms.csu.edu.au/study-futurestudents/home" class="cohort-select" tabindex="0">domestic (Aust/NZ) student information</li>
</ul>

Upvotes: 0

Charlie
Charlie

Reputation: 23818

You should separate your variables from the strings

$("div[id='cohort-switch'] ul").find("li[id='" + sv + "']").addClass('active');

OR use template strings for easy concatenation. 

 $("div[id='cohort-switch'] ul").find(`li[id='${sv}']`).addClass('active');

Upvotes: 0

Devsi Odedra
Devsi Odedra

Reputation: 5322

You can do something like below

var sv = 'dom-site';
$('ul').find('#'+sv).addClass('active');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="">
  <li id="int-site" data-display="International" data-site="https://cms.csu.edu.au/study/international/home" class="cohort-select" tabindex="0">international student information</li>
  <li id="dom-site" data-display="Domestic" data-site="https://cms.csu.edu.au/study-futurestudents/home" class="cohort-select" tabindex="0">domestic (Aust/NZ) student information</li>
</ul>

Upvotes: 0

shrys
shrys

Reputation: 5960

You could either use sv to append as string:

'li[id*="' + sv + '"]'


let sv = "dom-site";
$('div[id$="cohort-switch"] ul').find('li[id*="' + sv + '"]').addClass('active');
.active {
  color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cohort-switch">
  <ul class="">
    <li id="int-site" data-display="International" data-site="https://cms.csu.edu.au/study/international/home" class="cohort-select" tabindex="0">international student information</li>
    <li id="dom-site" data-display="Domestic" data-site="https://cms.csu.edu.au/study-futurestudents/home" class="cohort-select" tabindex="0">domestic (Aust/NZ) student information</li>
  </ul>
</div>

Or use template string:

`li[id*="${sv}"]`


let sv = "dom-site";
$('div[id$="cohort-switch"] ul').find(`li[id*="${sv}"]`).addClass('active');
.active {
  color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cohort-switch">
  <ul class="">
    <li id="int-site" data-display="International" data-site="https://cms.csu.edu.au/study/international/home" class="cohort-select" tabindex="0">international student information</li>
    <li id="dom-site" data-display="Domestic" data-site="https://cms.csu.edu.au/study-futurestudents/home" class="cohort-select" tabindex="0">domestic (Aust/NZ) student information</li>
  </ul>
</div>

Upvotes: 0

Pavel Třupek
Pavel Třupek

Reputation: 908

You can clearly see, that ('li[id*="+sv+"]') is badly formatted.

You should use ('li[id*='+sv+']') or just $('#'+sv).addClass('active');

Upvotes: 0

Related Questions