jquery - 将 CSS 应用于与数据属性不匹配的元素

Question

我正在尝试创建一种过滤器。

当用户单击一个按钮时，它将获取该按钮的 ID，并将 display:none; 应用于所有与给定的 data 属性不匹配的元素.

HTML:

<div class="job-list">
    <div class="row">
        <div class="grid half">
            <div class="job-item" data-job-type="fulltime">
                <h3>Marketing &amp; Communications Manager</h3>
                <h4>Central London -  salary competitive</h4>
            </div>
        </div>

       <div class="grid half">
           <div class="job-item" data-job-type="parttime">
               <h3>Senior PR &amp; Media Manager</h3>
               <h4>Central London -  salary dependent on experience</h4>
           </div>
       </div>
   </div>

当用户点击一个按钮时，var selection 被设置为 parttime 或 fulltime

var selection = 'fulltime';

然后我尝试匹配页面上的元素:

a) 在 .job-list 中

b) 有data-job-type="[上面设置的选择变量]"

$('.job-list div[data-job-type!="'+selection+'"]').css('display','none'); 

但是我发现它选择了整个 .job-list 并将 display:none; 应用于它，而不是匹配的子元素？

JSFiddle https://jsfiddle.net/h9s3szg2/

Answer 1

根据documentation

Select elements that either don't have the specified attribute, or do have the specified attribute but not with a certain value.

您的选择器过于激进。它会选择所有 div，即使它们没有该属性也是如此，因为它们满足条件 [data-job-type!="'+selection+'"]。向选择器添加额外的 [data-job-type] 以仅针对具有该属性的 div

$(document).ready(function() {
  $('.button').click(function() {
    var selection = 'fulltime';
    $('.job-list div[data-job-type][data-job-type!="' + selection + '"]').closest('.grid').hide();
  });
});

.job-item {
  width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="button">Click me!</div>
<div class="job-list">
  <div class="row">
    <div class="grid half">
      <div class="job-item" data-job-type="fulltime">
        <h3>Marketing &amp; Communications Manager</h3>

        <h4>Central London -  salary competitive</h4>

      </div>
    </div>
    <div class="grid half">
      <div class="job-item" data-job-type="parttime">
        <h3>Senior PR &amp; Media Manager</h3>

        <h4>Central London -  salary dependent on experience</h4>

      </div>
    </div>
  </div>
</div>

一些旁注。

1. hide() 可以代替 css('display', 'none')
2. 最好hide()整个子容器，在本例中，grid