英文:
How to add class to parent elements?
问题
对于具有类名"arrows"的span元素,我试图向具有类名"collapse"的div以及具有类名"navbar-toggler"的div添加一个类和属性。
我尝试了以下代码:
<!-- language: lang-js -->
$(function() {
  $('.arrows[aria-expanded="true"]').closest('.navbar-toggler').attr("aria-expanded", true);
});
$(function() {
  $('.arrows[aria-expanded="true"]').parents('.collapse').addClass('in');
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-toggler collapse-icons" data-toggle="collapse" data-target="#exCollapsingNavbar10">
  <i class="material-icons add"></i>
  <i class="material-icons remove"></i>
</div>
<div class="collapse" id="exCollapsingNavbar10">
  <ul class="category-sub-menu">
    <li data-depth="1" data-id="11">
      <a class="category-sub-link" href="">Educație Arduino</a>
      <span class="arrows" data-toggle="collapse" data-target="#exCollapsingNavbar11" aria-expanded="true">
</div>
请注意,以上是代码的翻译部分,没有其他内容。
英文:
For the span element with the class "arrows", I'm trying to add a class to the div with the class "collapse" from its parents and also an attribute to the div with the class "navbar-toggler".
I tried the following code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(function() {
  $('.arrows[aria-expanded="true"]').closest('.navbar-toggler').setAttribute("aria-expanded", true);
});
$(function() {
  $('.arrows[aria-expanded="true"]').parents('.collapse').addClass('in')
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-toggler collapse-icons" data-toggle="collapse" data-target="#exCollapsingNavbar10">
  <i class="material-icons add"></i>
  <i class="material-icons remove"></i>
</div>
<div class="collapse" id="exCollapsingNavbar10">
  <ul class="category-sub-menu">
    <li data-depth="1" data-id="11">
      <a class="category-sub-link" href=" ">Educație Arduino</a>
      <span class="arrows" data-toggle="collapse" data-target="#exCollapsingNavbar11" aria-expanded="true">
<!-- end snippet -->
答案1
得分: 1
下面是您提供的代码的翻译部分:
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-js -->
$ ('.arrows [aria-expanded=true]')
  .parents ('.collapse')
  .addClass ('in')
  .prev ()
  .attr ('aria-expanded', true);
<!-- 语言: lang-css -->
.in {
  background: yellow;
}
.navbar-toggler[aria-expanded=true] {
  background: red;
}
<!-- 语言: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-toggler collapse-icons" data-toggle="collapse" data-target="#exCollapsingNavbar10">
  <i class="material-icons add"></i>
  <i class="material-icons remove"></i>
</div>
<div class="collapse" id="exCollapsingNavbar10">
  <ul class="category-sub-menu">
    <li data-depth="1" data-id="11">
      <a class="category-sub-link" href=" ">Educație Arduino</a>
      <span class="arrows" data-toggle="collapse" data-target="#exCollapsingNavbar11" aria-expanded="true"></span>
    </li>
  </ul>
</div>
<!-- 结束代码片段 -->
请注意,代码中的 HTML 部分已经翻译成中文,但其中的类名和属性名保持原样,因为它们通常不需要翻译。如果您需要进一步的翻译或有其他问题,请随时提出。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('.arrows[aria-expanded=true]')
  .parents('.collapse')
  .addClass('in')
  .prev()
  .attr('aria-expanded', true);
<!-- language: lang-css -->
.in {
  background: yellow;
}
.navbar-toggler[aria-expanded=true] {
  background: red;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-toggler collapse-icons" data-toggle="collapse" data-target="#exCollapsingNavbar10">
  <i class="material-icons add"></i>
  <i class="material-icons remove"></i>
</div>
<div class="collapse" id="exCollapsingNavbar10">
  <ul class="category-sub-menu">
    <li data-depth="1" data-id="11">
      <a class="category-sub-link" href=" ">Educație Arduino</a>
      <span class="arrows" data-toggle="collapse" data-target="#exCollapsingNavbar11" aria-expanded="true"></span
    </li>
  </ul>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。


评论