Jquery 带变量的选择器并查找

Question

我想编写一个 Jquery 选择器，它使用变量将活动 class 添加到列表项。

变量sv是'dom-site'或'int-site'，它对应于列表项的id。 html 看起来像这样：

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

我的Jquery是这样的：

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

Answer 1

您可以清楚地看到，('li[id*="+sv+"]') 格式错误。

你应该使用 ('li[id*='+sv+']') 或者只是 $('#'+sv).addClass('active');

Answer 2

您可以使用 sv 作为字符串追加：

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

或使用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>

Answer 3

您可以执行如下操作

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>

Answer 4

您应该将变量与字符串分开

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

或使用 template strings 以便于串联。

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

Answer 5

假设您没有在其他地方使用过相同的 id，您可以简单地尝试 $('#'+sv).addClass('active')。如果要将 class 添加到最后一个列表项，请使用 $('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>

Answer 6

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

就这么简单

Jquery 带变量的选择器并查找

Jquery selector with variables and find

javascript

jquery

jquery-selectors