jQuery

Question

如果你能帮助我，我将不胜感激。我有工作代码，可以删除先前选择的元素中的类：

$('.tag-list-item').click(function () {
  $('.tag-list-item').each(function (i, elem) {
    console.log(elem);
    $(elem).removeClass('tag-list-chosen');
  });
});

但现在我需要重建它以仅在具有共同父元素的元素中删除类。（原因是，一开始这段代码通过一个参数帮助我 select 块，现在参数数量增加了）。试图那样做，但没有成功：

$('.tag-list-item').click(function () {
  $('.tag-list-item').parent('.tag-list-item', this).each(function (i, elem) {
    console.log(elem);
    $(elem).removeClass('tag-list-chosen');
  });
});

整个HTML就是这样工作的。首先，我有两个列表（也许会有更多，我想创建通用的工作代码）带有标签：

<div class="row no-width-margin" id="selector-theme">
   <h5 class="tag-title">Tag group 1</h5>
      <ul class="tag-list">
         <li class="tag-list-item" data-theme="all-theme">All themes</li>
         <li class="tag-list-item" data-theme="holidays-theme">Holidays</li>
         <li class="tag-list-item" data-theme="spring-theme">Spring</li>
         <li class="tag-list-item" data-theme="new-year-theme">New year</li>
      </ul>
</div>
<div class="row no-width-margin" id="selector-sector">
   <h5 class="tag-title">Tag group 2</h5>
   <ul class="tag-list" style="padding: 0">
      <li class="tag-list-item" data-sector="all-sector">Все отрасли</li>
      <li class="tag-list-item" data-sector="cinema-sector">Movies</li>
      <li class="tag-list-item" data-sector="entertainment-sector">Entertainment</li>
   </ul>
</div>

和有几十张卡片的大块，每张卡片都具有这种结构（数据属性的内容不同）：

<div class="file-box" data-theme="all-theme,holidays-theme" data-sector="all-sector,cinema-sector">
  <div class="file">
    <div class="image">
    </div>
    <div class="file-name">
    </div>
  </div>
</div>

当我单击列表中的标签时，没有 selected 标签的卡片会消失。

我做错了什么？

Answer 1

更新：此答案与问题编辑不匹配"When I click on the tag from the list, cards without selected tags are disappearing."

只要你的'mutual parent'有class或者其他的识别方式，就可以使用$(this).closest("parentclass")，例如：

$('.tag-list-item').click(function () {
    $(this).closest(".tag-list-parent")
           .find(".tag-list-item")
           .each(function (i, elem) {
                console.log(elem);
                $(elem).removeClass('tag-list-chosen');
           });

分解：

var mutualparent = $(this).closest(".parent-class");
va alltaglistsinparent = mutualparent.find(".tag-list-parent")

如果您没有 class，您可以使用包含的开发者，例如：

$(this).closest("div")...

或其他相关元素

$(this).closest("ul")...

如果他们都是siblings，即都在同一级别，那么你可以只使用上面的parent()或者你可以使用.siblings()有或没有.andSelf() 包括 this:

$('.tag-list-item').click(function () {
    $(this).siblings(".tag-list-item").andSelf()
           .each(function (i, elem) {
                console.log(elem);
                $(elem).removeClass('tag-list-chosen');
           });

jQuery - 通过 class 在父级中选择未知名称的元素

jQuery - selecting element by class in parent with unknowing name

jquery-selectors