我如何遍历li的url读取部分，然后使用Jquery将其作为类添加到li

Question

Hi I need some help with this.

Heres my code:-

  <ul class="product nobullet clearfix nomargin">
      <li class="product1">
          <div class="img-holder">
          <a href="/Mens/Shower/Bodywash/p/704357">
          <img src="/medias/sys_master/front/src/8838871056414.jpg"/>
          </a>
          </div>
      </li>
      <li class="product2">
          <div class="img-holder">
          <a href="/Mens/Shower/shampoo/p/704357">
          <img src="/medias/sys_master/front/src/8838871056414.jpg"/>
          </a>
          </div>
      </li>
      <li class="product3">
          <div class="img-holder">
          <a href="/Mens/toiletries/deoderant/p/704357">
          <img src="/medias/sys_master/front/src/8838871056414.jpg"/>
          </a>
          </div>
      </li>
  <ul>

  <script>
  $('ul.product').children().has("li").each(function(){
      var url = $(this).find('div.img-holder a').attr('href');
      url = url.split("/");
      alert(url);
      $(this).children("li").addClass(url[3]);
  });
  </script>

It doesn't work I'm still new to jquery and could do with some help. I need to read each product class li's read the url take the 3 item using / as asperator then add this to the li class. The code needs to loop through all the product li's

There can be upto 20 product classes all start with product then have a number at the end eg product1

Not sure if i've explained theat well enough so.... After the jquery code runs the html should look like this:-

  <ul class="product nobullet clearfix nomargin">
      <li class="product1 bodywash/">
          <div class="img-holder">
          <a href="/Mens/Shower/bodywash/p/704357">
          <img src="/medias/sys_master/front/src/8838871056414.jpg"/>
          </a>
          </div>
      </li>
      <li class="product2 shampoo">
          <div class="img-holder">
          <a href="/Mens/Shower/shampoo/p/704357">
          <img src="/medias/sys_master/front/src/8838871056414.jpg"/>
          </a>
          </div>
      </li>
      <li class="product3 deoderant">
          <div class="img-holder">
          <a href="/Mens/toiletries/deoderant/p/704357">
          <img src="/medias/sys_master/front/src/8838871056414.jpg"/>
          </a>
          </div>
      </li>
  <ul>

Answer 1

Check this

As you are iterating over li's you just need to use $(this).addClass(url[3]);

 $('ul.product li').each(function(){
      var url = $(this).find('div.img-holder a').attr('href');
      url = url.split("/");
      alert(url);
      $(this).addClass(url[3]);
  });

Answer 2

Nitin's answer is almost correct.

Firstly since you're new to jQuery it's worth explaining that your selector isn't matching <li> s like you think it is

$('ul.product').children().has("li")

Will match any children of the ul which have a descendant which is an <li> . Since the list items are the children of the list they themselves will not have list items as children.

 $('ul.product li').each(function(){
      var url = $(this).find('div.img-holder a').attr('href');
      url = url.split("/");
      alert(url);
      $(this).addClass(url[3]);
  });

With reference to this code ^ it's worth noting that JavaScript is a zero-based language. So you'll want to use url[2] to get the third item in that array