带有变量和查找的 Jquery 选择器

Posted 2023-05-09

【中文标题】带有变量和查找的 Jquery 选择器

【英文标题】：Jquery selector with variables and find

【发布时间】：2019-12-16 22:22:12

【问题描述】：

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

变量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');

【问题讨论】：

你想给最后一个列表项添加类吗？

【参考方案1】：

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

就这么简单

【讨论】：

@ObitoUchiha 求建议！

【参考方案2】：

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

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

或使用template strings 轻松连接。

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

【参考方案3】：

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

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

【参考方案4】：

您可以使用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>

【参考方案5】：

您可以执行以下操作

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>

【参考方案6】：

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