如何向父元素添加类?

huangapple go评论61阅读模式
英文:

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() {
  $(&#39;.arrows[aria-expanded=&quot;true&quot;]&#39;).closest(&#39;.navbar-toggler&#39;).setAttribute(&quot;aria-expanded&quot;, true);
});

$(function() {
  $(&#39;.arrows[aria-expanded=&quot;true&quot;]&#39;).parents(&#39;.collapse&#39;).addClass(&#39;in&#39;)
});

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;

&lt;div class=&quot;navbar-toggler collapse-icons&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#exCollapsingNavbar10&quot;&gt;
  &lt;i class=&quot;material-icons add&quot;&gt;&lt;/i&gt;
  &lt;i class=&quot;material-icons remove&quot;&gt;&lt;/i&gt;
&lt;/div&gt;

&lt;div class=&quot;collapse&quot; id=&quot;exCollapsingNavbar10&quot;&gt;
  &lt;ul class=&quot;category-sub-menu&quot;&gt;
    &lt;li data-depth=&quot;1&quot; data-id=&quot;11&quot;&gt;
      &lt;a class=&quot;category-sub-link&quot; href=&quot; &quot;&gt;Educație Arduino&lt;/a&gt;
      &lt;span class=&quot;arrows&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#exCollapsingNavbar11&quot; aria-expanded=&quot;true&quot;&gt;

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

$(&#39;.arrows[aria-expanded=true]&#39;)
  .parents(&#39;.collapse&#39;)
  .addClass(&#39;in&#39;)
  .prev()
  .attr(&#39;aria-expanded&#39;, true);

<!-- language: lang-css -->

.in {
  background: yellow;
}

.navbar-toggler[aria-expanded=true] {
  background: red;
}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;

&lt;div class=&quot;navbar-toggler collapse-icons&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#exCollapsingNavbar10&quot;&gt;
  &lt;i class=&quot;material-icons add&quot;&gt;&lt;/i&gt;
  &lt;i class=&quot;material-icons remove&quot;&gt;&lt;/i&gt;
&lt;/div&gt;

&lt;div class=&quot;collapse&quot; id=&quot;exCollapsingNavbar10&quot;&gt;
  &lt;ul class=&quot;category-sub-menu&quot;&gt;
    &lt;li data-depth=&quot;1&quot; data-id=&quot;11&quot;&gt;
      &lt;a class=&quot;category-sub-link&quot; href=&quot; &quot;&gt;Educație Arduino&lt;/a&gt;
      &lt;span class=&quot;arrows&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#exCollapsingNavbar11&quot; aria-expanded=&quot;true&quot;&gt;&lt;/span
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月24日 18:54:35
  • 转载请务必保留本文链接:https://go.coder-hub.com/76322744.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定