2012-08-07 46 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