Question

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

Ex –
when i click on “Painting of buildings facades with acrylic paint” i want get the classes

item150

item149

item143

i currently writes a j Query for this, but it give one closest li class, but cant get others it says undefined.

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);

});

here is a part of 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>

and you can access the example site via
http://isomat.eu/technical-solutions/menu-id-73

my goad is store clicked links parent item classes to cookie and load the same node when refreshing the page. can any one help me for getting the parent classes

thank you

Answer 1

This will give you all parent nodes of the class parent:

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

Is that what you’re asking for?

The following would give you a list of all class names, per parent:

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

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

Now, if you know that there will always be two classes, and that you’ll always want the second, you could do the following:

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

// [ "item150", "item149" ]

Otherwise, if you can assume that there will only be one item... class, perhaps this would be a neater approach:

$(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" ]