Question

我正在尝试使用同时也是其父级的子元素的“ a”元素包装svg，但是循环无法正常工作，因为所有svg都被第一个链接包装。我不知道为什么会这样。谢谢！

我会链接将其变为：

<li>
    Topic 1
    <svg></svg>
    <a href="link1"> </a>
</li>

进入此

<li>
   <a href="link1">
     Topic 1
     <svg></svg>
   </a>
</li>

$(document).ready(function () {

     $("ul").each(function(){

          var link =  $(this).find('a').attr('href');
	  $(this).find('svg').wrap("<a href=" + link + "></a>");

     });
	
});

ul{
  display: flex;
}
ul li{
 width: 90px;
 list-style: none;
}
ul li:hover{
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
    <ul>
        <li>
            Topic 1
            <svg></svg>
            <a href="link1"> </a>
        </li>
        <li>
            Topic 2
            <svg></svg>
            <a href="link2"></a>
        </li>
        <li>
            Topic 3
            <svg></svg>
            <a href="link3"></a>
        </li>
        <li>
            Topic4
            <svg></svg>
            <a href="link4"></a>
        </li>
    </ul>
</body>

Answer 1

在.each()而非<li>上带有<ul>的循环：

$(document).ready(function() {
  $("li").each(function() {
    var link = $(this).find('a').attr('href');
    $(this).find('svg').wrap("<a href=" + link + "></a>");

  });
});

ul {
  display: flex;
}

ul li {
  width: 90px;
  list-style: none;
}

ul li:hover {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <ul>
    <li>
      Topic 1
      <svg></svg>
      <a href="link1"> </a>
    </li>
    <li>
      Topic 2
      <svg></svg>
      <a href="link2"></a>
    </li>
    <li>
      Topic 3
      <svg></svg>
      <a href="link3"></a>
    </li>
    <li>
      Topic4
      <svg></svg>
      <a href="link4"></a>
    </li>
  </ul>

Answer 2

尝试循环遍历“ ul”中的每个“ li”；

$(document).ready(function () {

     $("ul li").each(function(){

          var link =  $(this).find('a').attr('href');
      $(this).find('svg').wrap("<a href=" + link + "></a>");

     });

});

无法正确包装元素锚标记

2 个答案: