javascript - jQuery 手风琴获取父 li

Question

I am trying to get clicked links', all parent item classes using jQuery

前 - 当我点击“用丙烯酸涂料绘制建筑物外墙”时，我想要上课

项目 150

项目 149

项目 143

我目前为此编写 aj Query，但它提供了一个最接近的 li 类，但无法获得其他它说未定义的类。

jQuery(".menu-sol a").click(function(event) {
event.preventDefault();
clicked=jQuery(this).closest('.parent').attr('class');
clicked=clicked.replace('parent ','');
clicked2=jQuery('.'+clicked).prev('.parent').attr('class');

alert(clicked);
alert(clicked2);

});

这是html的一部分

  <ul style="padding-top: 0px; border-top: medium none; padding-bottom: 0px; border-bottom: medium none; overflow: hidden; height: auto;" id="level_3">
      <li class="parent item144"><span src="" title=""></span><span class="separator"><span>Repairs of plasters</span></span>
        <ul style="padding-top: 0px; border-top: medium none; padding-bottom: 0px; border-bottom: medium none; overflow: hidden; height: 0px;" id="level_3_0">
          <li class="item152"><a href="/Repairing-of-fallen-plaster.html"><span>Repairing of fallen plaster</span></a></li>
          <li class="item153"><a href="/Repairing-of-hairline-cracks-in-plaster.html"><span>Repairing of hairline cracks in plaster</span></a></li>
        </ul>
      </li>
      <li class="parent item145"><span src="" title=""></span><span class="separator"><span>Repairs of masonries</span></span>
        <ul style="padding-top: 0px; border-top: medium none; padding-bottom: 0px; border-bottom: medium none; overflow: hidden; height: 0px;" id="level_3_1">
          <li class="item154"><a href="/Repairing-of-masonry-cracks-crack-width.html"><span>Repairing of masonry cracks (crack width </span></a></li>
          <li class="item155"><a href="/Repairing-of-detached-masonry-from-the-supporting-elements.html"><span>Repairing of detached masonry from the supporting elements</span></a></li>
          <li class="item156"><a href="/Repairing-of-severe-masonry-cracks-cracks-width-1-cm-Disorganised-masonry.html"><span>Repairing of severe masonry cracks (cracks width &gt; 1 cm) - Disorganised masonry</span></a></li>
        </ul>
      </li>
      <li class="parent item146"><span src="" title=""></span><span class="separator"><span>Repairs of concrete elements</span></span>
        <ul style="padding-top: 0px; border-top: medium none; padding-bottom: 0px; border-bottom: medium none; overflow: hidden; height: 0px;" id="level_3_2">
          <li class="parent item147"><span></span><span class="separator"><span>Reinforcement with composite materials (F.R.P.)</span></span>
            <ul style="padding-top: 0px; border-top: medium none; padding-bottom: 0px; border-bottom: medium none; overflow: hidden; height: 0px;" id="level_3_2_0">
              <li class="item162"><a href="/Reinforcement-of-the-shear-strength-of-a-beam.html"><span>Reinforcement of the shear strength of a beam</span></a></li>
              <li class="item163"><a href="/Reinforcement-of-the-flexural-strength-of-a-beam-or-slab.html"><span>Reinforcement of the flexural strength of a beam or slab</span></a></li>
              <li class="item164"><a href="/Columns-confinement.html"><span>Column's confinement</span></a></li>
            </ul>
          </li>
          <li class="item157"><a href="/Repairing-of-peeled-concrete-due-to-corrosion-of-the-steel-reinforcement.html"><span>Repairing of peeled concrete due to corrosion of the steel reinforcement</span></a></li>
          <li class="item158"><a href="/Repairing-of-damaged-concrete-surface-damage-blisters-broken-corners-etc.html"><span>Repairing of damaged concrete (surface damage, blisters, broken corners etc.)</span></a></li>
          <li class="item159"><a href="/Repairing-of-damaged-concrete-elements-by-grouting-with-concrete-or-high-strength-mortar.html"><span>Repairing of damaged concrete elements by grouting with concrete or high strength mortar</span></a></li>
          <li class="item160"><a href="/Repairing-of-cracks-in-concrete-elements-with-resin-injection.html"><span>Repairing of cracks in concrete elements with resin-injection</span></a></li>
          <li class="item161"><a href="/Repairs-with-composite-materials-welding-metal-plates-to-concrete-elements.html"><span>Repairs with composite materials - welding metal plates to concrete elements</span></a></li>
        </ul>
      </li>
      <li class="parent item148"><span src="" title=""></span><span class="separator"><span>Painting</span></span>
        <ul style="padding-top: 0px; border-top: medium none; padding-bottom: 0px; border-bottom: medium none; overflow: hidden; height: auto;" id="level_3_3">
          <li class="parent item149"><span src="" title=""></span><span class="separator"><span>Acrylic paints</span></span>
            <ul style="padding-top: 0px; border-top: medium none; padding-bottom: 0px; border-bottom: medium none; overflow: hidden; height: auto;" id="level_3_3_0">
              <li class="parent item150"><span src="" title=""></span><span class="separator"><span>Painting of exterior surfaces</span></span>
                <ul style="padding-top: 0px; border-top: medium none; padding-bottom: 0px; border-bottom: medium none; overflow: hidden; height: 60px;" id="level_3_3_0_0">
                  <li class="item166"><a href="/Painting-of-buildings-facades-with-acrylic-paint.html"><span>Painting of buildings facades with acrylic paint</span></a></li>
                  <li class="item167"><a href="/Painting-of-building-facades-with-highly-elastic-waterproofing-paint.html"><span>Painting of building facades with highly-elastic waterproofing paint</span></a></li>
                </ul>
              </li>
              <li class="item165"><a href="/Painting-of-interior-surfaces.html"><span>Painting of interior surfaces</span></a></li>
            </ul>
          </li>
          <li class="parent item151"><span src="" title=""></span><span class="separator"><span>Epoxy paints</span></span>
            <ul style="padding-top: 0px; border-top: medium none; padding-bottom: 0px; border-bottom: medium none; overflow: hidden; height: 0px;" id="level_3_3_1">
              <li class="item168"><a href="/Painting-of-metal-surfaces-with-anti-corrosive-epoxy-primer.html"><span>Painting of metal surfaces with anti-corrosive epoxy primer</span></a></li>
              <li class="item169"><a href="/Painting-of-walls-with-high-durability-epoxy-coating.html"><span>Painting of walls with high durability epoxy coating</span></a></li>
              <li class="item170"><a href="/Waterproofing-of-pools-and-painting-with-epoxy-coating.html"><span>Waterproofing of pools and painting with epoxy coating</span></a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

您可以通过 http://isomat.eu/technical-solutions/menu-id-73访问示例站点

我的刺激是商店点击链接父项目类到 cookie 并在刷新页面时加载相同的节点。任何人都可以帮助我获得父类

谢谢你

Answer 1

这将为您提供该类的所有父节点parent：

$(this).parents('.parent')

这是你要求的吗？

以下将为您提供每个父母的所有班级名称的列表：

$(this).parents('.parent').map(function() {
    return $(this).attr('class').split(/\s+/);
}).toArray();

// [ [ "parent", "item150" ], [ "parent", "item149" ], ... ]

现在，如果您知道总会有两个类，并且您总是想要第二个，您可以执行以下操作：

$(this).parents('.parent').map(function() {
    return $(this).attr('class').split(/\s+/)[1];
}).toArray();

// [ "item150", "item149" ]

否则，如果您可以假设只有一个item...类，那么这可能是一种更简洁的方法：

$(this).parents('.parent').map(function() {
    var classes = $(this).attr('class').split(/\s+/);
    for(var i = 0; i < classes.length; i++) {
       if(classes[i].substring(0, 4) == 'item')
          return classes[i];
    }
}).toArray();

// [ "item150", "item149" ]