Как понять строчку (JQuery) кода $(".filter > div*[filter !='"+$(this).attr('filter')+"']")

107

21 сентября 2021, 09:00

На странице есть кнопки которые определенным образом фильруют картинки. По нажатию одной из 4 кнопок, срабатывает фильтр и несколько картинок скрываются, остальные остаются видимыми. Вопрос как эта строчка работает "div*[filter !='"+$(this).attr('filter')+"']")" ? Как объяснить на пальцах что она делает ?

   <button class="button" filter="all">All</button>
        <button class="button" filter="wd">Web design</button>
        <button class="button" filter="ud">Ui/Ux design</button>
        <button class="button" filter="moc">Mockups</button>
      </div>
    </div>
    <div class="row filter">
      <div filter="wd" class="col-xl-4"><img src="img/item1.png" alt=""></div>
      <div filter="moc" class="col-xl-4"><img src="img/item2.png" alt=""></div>
      <div filter="wd" class="col-xl-4"><img src="img/item3.png" alt=""></div>
      <div filter="moc" class="col-xl-4"><img src="img/item4.png" alt=""></div>
      <div filter="ud" class="col-xl-4"><img src="img/item5.png" alt=""></div>
      <div filter="ud" class="col-xl-4"><img src="img/item6.png" alt=""></div>
    </div>

$(".button").click(function() {
  if($(this).attr("filter") && $(this).attr("filter") !== "all"){
    $(".filter > div*[filter !='"+$(this).attr('filter')+"']").fadeOut(350);
    $(".filter > div*[filter ='"+$(this).attr('filter')+"']").fadeIn(350);
  }else{
   $(".filter > div").fadeIn(350);
  }
});

$(".button").click(function() { 
  if ($(this).attr("filter") && $(this).attr("filter") !== "all") { 
    $(".filter > div*[filter !='" + $(this).attr('filter') + "']").fadeOut(350); 
    $(".filter > div*[filter ='" + $(this).attr('filter') + "']").fadeIn(350); 
  } else { 
    $(".filter > div").fadeIn(350); 
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<button class="button" filter="all">All</button> 
<button class="button" filter="wd">Web design</button> 
<button class="button" filter="ud">Ui/Ux design</button> 
<button class="button" filter="moc">Mockups</button> 
<div class="row filter"> 
  <div filter="wd" class="col-xl-4"><img src="img/item1.png" alt="">1</div> 
  <div filter="moc" class="col-xl-4"><img src="img/item2.png" alt="">2</div> 
  <div filter="wd" class="col-xl-4"><img src="img/item3.png" alt="">3</div> 
  <div filter="moc" class="col-xl-4"><img src="img/item4.png" alt="">4</div> 
  <div filter="ud" class="col-xl-4"><img src="img/item5.png" alt="">5</div> 
  <div filter="ud" class="col-xl-4"><img src="img/item6.png" alt="">6</div> 
</div>

Answer 1

Ищется класс filter и далее все дочерние элементы div данного класса, у которых атрибут filter не равен атрибуту filter кнопки по которой произошёл клик. И далее эти атрибуты скрываются за 350ms. Это если говорить о данной строчке:

$(".filter > div*[filter !='" + $(this).attr('filter') + "']").fadeOut(350);

Строчка после неё показывает остальные элементы, которые не должны быть скрыты таким же образом

Answer 2

jQuery позволяет использовать кастомные селекторы. Браузером такие селекторы не поддерживаются, однако jQuery их преобразует во что-нибудь, после чего самостоятельно дофильтровывает найденный результат.

В данном случае использованы две такие возможности:

селектор на неравенство в атрибуте [attr!=value] чтобы найти элементы, у которых такого атрибута нет, либо он есть с другим значением
возможность зафигачить в селектор звёздочку вместе с тегом - вроде бы абсолютно бесполезная возможность, я даже не уверен, что она документированная - вероятно так делать не надо, а то будет как с href когда-то.

function check(selector) { 
  try { 
    return !!document.querySelectorAll(selector) 
  } catch (e) { 
    return false 
  } 
} 
 
function log(selector) { 
  var $els = $(selector) 
  console.log(`${selector} 
selector ${check(selector) ? "is" : "is NOT"} valid 
found: ${$els.length} 
${[...$els].map(x => x.outerHTML.slice(0, 64)).join(` 
`)}`) 
} 
 
log("div") 
log("div*") 
log("*div") 
log("*div*") 
 
log("div[qqq=abc]") 
log("div[qqq!=abc]") 
 
log("div*[qqq=abc]") 
log("div*[qqq!=abc]")

.as-console-wrapper.as-console-wrapper { max-height: 100vh }

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div></div> 
<div qqq="abc"></div> 
<div qqq="cde"></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как понять строчку (JQuery) кода $(".filter > div*[filter !='"+$(this).attr('filter')+"']")

Как проверить совпадение строки в списке?

Как программно получить все элементы из формы?

Как убрать гласные буквы из массива

социальная сеть на asp.NET Core + Angular 8 [закрыт]