crcerror crcerror - 1 month ago 5
jQuery Question

jQuery - selecting element by class in parent with unknowing name

Appreciate if you help me. I have working code which removes classes in previous chosen elements:

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


But now I need to rebuild it to remove classes only in elements with a mutual parent. (The reason is, at start this code helped me to select blocks by one parameter, and now amount of parameters increased). Tried to make it that way, not worked:

$('.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');
});
});


Whole HTML work like this. First, I have two lists (maybe there will me more, I want to create universal working code) with tags:

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


and big block with dozens of cards each of them having this structure (with different content of data-attributes):

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


When I click on the tag from the list, cards without selected tags are disappearing.

What am I doing wrong?

Answer

UPDATE: This answer does not match the question edit "When I click on the tag from the list, cards without selected tags are disappearing."


As long as your 'mutual parent' has a class or some other way to identify, you can use $(this).closest("parentclass"), eg:

$('.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');
           });

To break this down:

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

If you don't have a class, you could use the containing dev, eg:

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

or other relevant element

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

if they are all siblings, ie all at the same level, then you can just use parent() above or you can use .siblings() with or without .andSelf() to include this:

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