如果rect有类，则在框中添加列表

Question

我在svg中选择rect时遇到问题。

如您所见，我想在ul。

中写一个列表

如果矩形有类的东西。例如，如果rect有红色类，那么我想在ul里面添加一个列表，或者如果另一个rect有蓝色类，我想添加另一个列表等等。

＆＃13;

＆＃13;

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

＆＃13;

svg rect.red {
  fill: red;
}

svg rect.blue {
  fill: blue;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

由于hasClass不支持SVG，您可以使用.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);

此外，您不能拥有相同ID的多个元素，ID应该是唯一的。所以我已将var rect = $('#edna-rect');更改为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>

Answer 2

jquery函数＆＃39; hasClass＆＃39;拼写不清楚：

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