If rect has class then add list in the box

Question

I have an issue with picking rect in svg.

As you can see the example, i want to write a list inside the ul.

If the rectangle has a class something. For example if the rect has class red, then i want to add a list inside ul or if the other rect has class blue, i want to add another list and so on.

(function($) {
      var rect = $('#edna-rect');
      var ul = $('.personal-list-ul');
      var personBox = $('.person-box');

      personBox.each(function(){
          if (rect.hasClass('red')) {
              $(this).ul.html('<li>List 1</li><li>List2</li><li>List3</li>')
          }
      })

 })(jQuery);

svg rect.red {
  fill: red;
}

svg rect.blue {
  fill: blue;
}

.person-box {
  width: 45%;
  float: left;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="person-box" style="border:1px solid red">
    <div class="person-info-top">

        <h4 class="person-name"><a href="">Julia</a></h4>
        
        
        <svg id="rect-empty-big" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 47 47">
            <rect id="edna-rect" class="st0edna rectangle red" x=".5" y=".5"  width="46" height="46"/>
        </svg>

    </div>
    
    <div class="person-needs">
        <h5 class="text-center">Personal List</h5>
        <ul class="personal-list-ul">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>


<div class="person-box" style="border:1px solid red">
    <div class="person-info-top">

        <h4 class="person-name"><a href="">Brad</a></h4>
        
        
        <svg id="rect-empty-big" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 47 47">
            <rect id="edna-rect" class="st0edna rectangle blue" x=".5" y=".5"  width="46" height="46"/>
        </svg>

    </div>
    
    <div class="person-needs">
        <h5 class="text-center">Personal List</h5>
        <ul class="personal-list-ul">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

score 3 · Accepted Answer · answered Aug 29 '17 at 05:54

Since hasClass is not supported on SVG you can use .indexOf()

(function($) {
  var rect = $('.st0edna');
  var ul = $('.personal-list-ul');
  var personBox = $('.person-box');
  personBox.each(function() {
    if ($(this).find(rect).attr('class').indexOf("red") > -1) {
      $(this).find(ul).html('<li>List 1</li><li>List2</li><li>List3</li>')
    }
  })

})(jQuery);

Also you can't have multiple elements with the same ID, Id should be unique. So I've changed var rect = $('#edna-rect'); to var rect = $('.st0edna')

(function($) {
  var rect = $('.st0edna');
  var ul = $('.personal-list-ul');
  var personBox = $('.person-box');
  personBox.each(function() {
    if ($(this).find(rect).attr('class').indexOf("red") > -1) {
      $(this).find(ul).html('<li>List 1</li><li>List2</li><li>List3</li>')
    }
  })

})(jQuery);

svg rect.red {
  fill: red;
}

svg rect.blue {
  fill: blue;
}

.person-box {
  width: 45%;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="person-box" style="border:1px solid red">
  <div class="person-info-top">

    <h4 class="person-name"><a href="">Julia</a></h4>


    <svg id="rect-empty-big" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 47 47">
            <rect  class="st0edna rectangle red" x=".5" y=".5"  width="46" height="46"/>
        </svg>

  </div>

  <div class="person-needs">
    <h5 class="text-center">Personal List</h5>
    <ul class="personal-list-ul">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>


<div class="person-box" style="border:1px solid red">
  <div class="person-info-top">

    <h4 class="person-name"><a href="">Brad</a></h4>


    <svg id="rect-empty-big" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 47 47">
            <rect class="st0edna rectangle blue" x=".5" y=".5"  width="46" height="46"/>
        </svg>

  </div>

  <div class="person-needs">
    <h5 class="text-center">Personal List</h5>
    <ul class="personal-list-ul">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

Thank you very much my friend. It's working as i want. – erenesto Aug 29 '17 at 06:35 — erenesto, Aug 29 '17 at 06:35
@erenesto No problem, happy to help – Carsten Løvbo Andersen Aug 29 '17 at 06:35 — Carsten Løvbo Andersen, Aug 29 '17 at 06:35

score 0 · Answer 2 · answered Aug 29 '17 at 05:48

0

The jquery function 'hasClass' is not well spelt:

personBox.each(function(){
      if (rect.hasClass('red')) {
          $(this).ul.html('<li>List 1</li><li>List2</li><li>List3</li>')
      }
  })

answered Aug 29 '17 at 05:48

Anthony Ngene

746
8
12

`hasClass` is not supported on svg with jQuery (or at least doesnt have the same meaning) https://stackoverflow.com/questions/17840995/jquery-hasclass-method-fails-for-svg-elements/24761239 – Nico Aug 29 '17 at 05:51
Thanks but thats not the reason. – erenesto Aug 29 '17 at 05:52

If rect has class then add list in the box

2 Answers2