将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="[the selection var set above]"

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

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

JSFiddle https://jsfiddle.net/h9s3szg2/

Answer 1

根据documentation

  

选择要么 具有指定属性，要么具有指定属性但没有特定值的元素。

你的选择器过于激进。它正在选择所有div，即使它们没有属性，因为它们满足条件[data-job-type!="'+selection+'"]。向选择器添加额外的[data-job-type]，以仅定位具有该属性的div

＆＃13;

＆＃13;

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

＆＃13;

.job-item {
  width: 500px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

一些旁注。

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