2012-08-07 68 views
1
I am trying to get clicked links', all parent item classes using jQuery 

enter image description here的jQuery手风琴得到父李

防爆 - 当我在 “建筑绘画与丙烯酸外墙涂料” 我想要得到的类

item150

item149

点击

item143

i curre为此写了一个j查询,但它给出了一个最接近的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并加载相同的节点访问该示例站点刷新页面时。任何一个可以帮助我获取父类

谢谢

+0

返回所有的父类,你应该使用'。每()' – 2012-08-07 11:03:51

+0

不,我不希望所有我需要的只是父类标签header.ex item150 item149 item143 – 2012-08-07 11:08:55

+0

'$(项目).parent ().children('li');'这将包含所有列表。 – 2012-08-07 11:11:27

回答

2

这会给你的类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" ] 
+0

是的,最后一个工作非常...非常感谢你的帮助队友...干杯! – 2012-08-07 11:42:07