jquery 我有一个导航菜单项,它的内容是“a”标签,它的类是class=“section-link”,我如何从js将popover-link-a添加到类定义中

x9ybnkn6  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(89)

如果主体中的网格没有数据,那么我想在菜单li组件上显示弹出信息。我通过添加popover-link-a类来显示弹出窗口
现状:

<li id="tecrube" runat="server"><a href="#tecrube" class="section-link">İş Tecrübesi</a></li>

字符串
在运行时用JavaScript做如下

<li id="tecrube" runat="server">
  <a
    class="popover-link-a section-link"
    href="#tecrube" data-toggle="popover"
    title="İş Tecrübesi"
    data-content="İş Tecrübesi Boştur !"
    data-original-title="İş Tecrübesi" onclick="javascript:return false;">
    </i>İş Tecrübesi
  </a>
</li>


我的导航菜单如下:

<div class="span3 ozgecmis-sidebar">
  <ul class="nav nav-list ozgecmis-sidenav" id="ozgecmis-nav">
    <li>
      <a href="#kisisel" class="section-link">Kişisel Bilgiler</a>
    </li>
    <li id="navIletisimBilgileri" runat="server">
      <a href="#iletisim" class="section-link">İletişim Bilgileri</a>
    </li>
    <li id="navKisiselDurum" runat="server">
      <a href="#kisisel-durum" class="ozgecmis-tree-toggler section-link">Kişisel Durum</a>
      <ul class="nav nav-list ozgecmis-tree-inner" id="kisisel-durum-tree-inner">
        <li>
          <a href="#kisisel-engel" class="section-link">Engelli Durumu</a>
        </li>
        <li>
          <a href="#kisisel-eskihukumlu" class="section-link">Eski Hükümlülük</a>
        </li>
        <li>
          <a href="#kisisel-oncelik" class="section-link">Öncelik Durumu</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#ogrenim" class="section-link">Öğrenim Bilgileri</a>
    </li>
    <li>
      <a href="#meslek" class="section-link">Meslek Bilgileri</a>
    </li>
    <li id="tecrubeMenu" runat="server" Visible="true">
      <a href="#tecrube" class="section-link">İş Tecrübesi</a>
    </li>
    <li id="navTercih" runat="server">
      <a href="#tercih" class="section-link">İş Tercihleri</a>
    </li>
    <li id="navBelgeler" runat="server">
      <a href="#belgeler" class="section-link">Kişisel Belgeler</a>
    </li>
    <li id="navEkOzellik" runat="server">
      <a href="#ekozellik" class="ozgecmis-tree-toggler section-link">Ek Özellikler</a>
      <ul class="nav nav-list ozgecmis-tree-inner" id="ekozellik-tree-inner">
        <li>
          <a href="#ekozellik-egitimkurs" class="section-link">Eğitim ve Kurs</a>
        </li>
        <li>
          <a href="#ekozellik-nitelik" class="section-link">Nitelik</a>
        </li>
      </ul>
    </li>
    <li id="navYabanciDil" runat="server">
      <a href="#yabancidil" class="section-link">Yabancı Dil</a>
    </li>
    <li id="navSinav" runat="server">
      <a href="#sinav" class="ozgecmis-tree-toggler section-link">Sınav Bilgileri</a>
      <ul class="nav nav-list ozgecmis-tree-inner" id="sinav-tree-inner">
        <li>
          <a href="#sinav-osym" class="section-link">ÖSYM Sınavları</a>
        </li>
        <li>
          <a href="#sinav-ozel" class="section-link">Diğer Sınavlar</a>
        </li>
      </ul>
    </li>
    <li id="navReferans" runat="server">
      <a href="#referans" class="section-link">Referanslar</a>
    </li>
    <li id="navDosyaEkle" runat="server">
      <a href="#dosyaekle" class="section-link">Dosyadan Özgeçmiş Yükleme</a>
    </li>
    <li id="navEkHizmetler" runat="server">
      <a href="#ekhizmetler" class="section-link">Ek Hizmetler</a>
    </li>
    <li>
      <a runat="server" id="hrefOzgecmisGoruntule" href="~/Ozgecmis/OzgecmisGoruntule.aspx" target="_blank" class="section-link">
        <b>Özgeçmiş Görüntüle</b>
      </a>
    </li>
  </ul>
  <br/>
</div>

vptzau2j

vptzau2j1#

使用CSS选择器,你可以找到所有'anchors'与'section-link'类:“); document. writeln(”);
节点对象的mdn,parentElement属性:https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement
数据集使用的mdn:https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

function setClass() {
  document.querySelectorAll("li>a.section-link").forEach((item) => {
    let parent_li = item.parentElement;
    console.log(`${parent_li} is parent of ${item}`);
    item.classList.add('popover-link-a');
    item.dataset.originalTitle = "İş Tecrübesi"; // etc...
  });
};
setClass();

个字符

相关问题