Question

在某些jQuery任务中遇到麻烦。以下是脚本的示例。

$('.filter-item').each(function() {
  var catID = $(this).data('category');
  return $(".filter-item span").wrap('<a href=#' + catID + '></a>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div class="filters-list">
  <div class="filter-item" data-category="1">
    <span>category 1</span>
  </div>
  <div class="filter-item" data-category="2">
    <span>category 2</span>
  </div>
  <div class="filter-item" data-category="3">
    <span>category 3</span>
  </div>
</div>

你们可以看到我从脚本中得到的结果如下所示。

<div class="filter-item" data-category="1">
   <a href="#1">
      <a href="#2">
         <a href="#3">
            <span>category 1</span>
         </a>
      </a>
   </a>
</div>
<div class="filter-item" data-category="2">
   <a href="#1">
      <a href="#2">
         <a href="#3">
            <span>category 2</span>
         </a>
      </a>
   </a>
</div> 
<div class="filter-item" data-category="3">
   <a href="#1">
      <a href="#2">
         <a href="#3">
            <span>category 3</span>
         </a>
      </a>
   </a>
</div>

我想要实现的目标如下所示。

<div class="filter-item" data-category="1">
   <a href="#1">
      <span>category 1</span>
   </a>
</div>
<div class="filter-item" data-category="2">
   <a href="#2">
      <span>category 2</span>
   </a>
</div>
<div class="filter-item" data-category="3">
   <a href="#3">
      <span>category 3</span>
   </a>
</div>

希望很清楚。对不起，我不擅长jQuery，希望有人可以提供帮助。

Answer 1

您正在span标记中包装所有a，但实际上您只想包裹内部span。为此，您应该使用$(this).find("span")并仅包含找到的元素，而不是span下的所有.filter-item。

此外，您不需要从函数返回任何内容，因为您正在修改元素。

＆＃13;

$('.filter-item').each(function() {
  var catID = $(this).data('category');
  $(this).find("span").wrap('<a href=#' + catID + '></a>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div class="filters-list">
  <div class="filter-item" data-category="1">
    <span>category 1</span>
  </div>
  <div class="filter-item" data-category="2">
    <span>category 2</span>
  </div>
  <div class="filter-item" data-category="3">
    <span>category 3</span>
  </div>
</div>

＆＃13;

麻烦一些基本的jQuery

1 个答案: