如何迭代滑块中每个幻灯片的jQuery函数？

摘要：这样做的目的是显示用户可以点击的3部分滑块，并且他们可以使用每张幻灯片上的索引将该幻灯片上的卡过滤为特定主题。过滤器工作正常，但JavaScript填充索引时存在问题：它为所有3张卡片填充索引，并在每张幻灯片上显示大索引。相反，每张幻灯片的索引必须是唯一的，并且只包含同一张幻灯片中的卡片的标签。我真的想避免为不同的幻灯片重复代码。如何迭代滑块中每个幻灯片的jQuery函数？

HTML

下面的HTML有3个（LI）滑动。每张幻灯片都包含一个可见索引（.hashtag-list）和一个或多个文章卡片（.item）。除第一个以外，每个（.item）都包含一个带有一个或多个hashtag值的隐藏输入。

<li class="trend-cards"> 
    <div class="card-items"> 
     <div class="item trendingtopiccardblock"> 
      <div class="hashtag-list"></div> 
     </div> 
     <div class="item"> 
      <input class="tags" type="hidden" value="TopicA,TopicB"/> 
     </div> 
     <div class="item"> 
      <input class="tags" type="hidden" value="TopicC"/> 
     </div> 
    </div> 
</li> 
<li class="trend-cards"> 
    <div class="card-items"> 
     <div class="item trendingtopiccardblock"> 
      <div class="hashtag-list"></div> 
     </div> 
     <div class="item"> 
      <input class="tags" type="hidden" value="TopicC, TopicD"/> 
     </div> 
     <div class="item"> 
      <input class="tags" type="hidden" value="TopicA,TopicC,TopicD"/> 
     </div> 
    </div> 
</li> 
<li class="trend-cards"> 
    <div class="card-items"> 
     <div class="item trendingtopiccardblock"> 
      <div class="hashtag-list"></div> 
     </div> 
     <div class="item"> 
      <input class="tags" type="hidden" value="TopicA, TopicD"/> 
     </div> 
     <div class="item"> 
      <input class="tags" type="hidden" value="TopicB,TopicC,TopicD"/> 
     </div> 
    </div> 
</li>

的JavaScript

以下的jQuery从.tags添加类拉动值，将它们存储在一个阵列，删除重复，将它们排序，然后填充HTML在回调。（忽略countryButtons和国阵，因为这是不相关的。）

populateHashtagList: function() { 

     var $cards = $(".card-items .tags"); 
     var list = []; 
     var $countryButtons = $('.card-filtering li .country-filtering'); 
     var countries = []; 

     $countryButtons.each(function() { 
      countries.push(this.firstChild.data.replace("#", "").toLowerCase()); 
     }); 

     //Get tag values, set to lowercase and store in List array 
     $cards.each(function() { 
      var tags = getTags($(this).val()); 
      $(tags).each(function (index, value) { 
       var tagValue = value.toLowerCase(); 
       if($.inArray(tagValue, countries) === -1) list.push(value); 
      }); 

     }); 

     //Remove duplicates from the array 
     var uniqueTags = []; 
     $.each(list, function(i, el){ 
      if($.inArray(el, uniqueTags) === -1) uniqueTags.push(el); 

     }); 
     uniqueTags.sort(); 

     function getTags(parameter) { 
      var arr = parameter.split(','); 
      return arr; 
     } 

     //Populate hash-tag List 
     var hashtagList = $('.hashtag-list'); 

     populateHashtagList(); 

     function populateHashtagList(callback) { 

      $.each(uniqueTags, function(i, el){ 
       var htmlToInsert = '<span class="active"><a href="#">' + el + '</a></span>'; 
       hashtagList.append(htmlToInsert); 
      }); 

      if(typeof callback == "function") 
      callback(); 
     } 
    }

我已经试过

使用$隔离功能（ “趋势卡”）。每个功能。这导致了相同的大型列表，但是每张幻灯片的数量都是三倍。
向.tags选择器添加更多特定的路径，它们什么都不改变。
设置了.tags变量后，使用父级选择器，并从那里调用该函数的其余部分。在这种情况下没有标签填充。

我很感激任何反馈意见和输入。我想知道如何在未来更好地做到这一点。非常感谢你！

来源

2016-02-25 uxkidd

使用。每（）应该工作正常，你指定$卡选择父母，当你尝试过的解决方案？ $（“。card-items .tags”，this） – MakG

将此代码包装在.each（）函数中是最好的解决方案。你说过你尝试过，你可能忘记了为卡片和标签列表选择器指定父元素。

这里是一个工作示例：https://jsfiddle.net/k3oajavs/

$(".trend-cards").each(function(){ 
    var $cards = $(".card-items .tags", this); 
    // ... 
    var hashtagList = $('.hashtag-list', this); 
});

来源

2016-02-25 14:26:49 MakG

非常感谢！这工作。 – uxkidd

如何迭代滑块中每个幻灯片的jQuery函数？

回答

相关问题