Q:

how can I target with jquery this element?

Im trying to customise a Wp plugin called essential grid that has a filter to filter content. this filter buttons have the following markup:
<div data-filter="filter-documentary" data-fid="11" class="esg-filterbutton"><span>Documentary</span><span class="esg-filter-checked"><i class="eg-icon-ok-1"></i></span></div>

how can i target "data-filter="filter-documentary" with jquery? so when this button is clicked, css is applied to a div?
I have tried:
 jQuery(document).ready(function( $ ) {

  var filterdoc = document.getElementById('[data-filter="filter-documentary"]');

  filterdoc.style.cursor = 'pointer';

  filterdoc.onclick = function() {

      $("body").addClass("filter_doc");
  };

  });

but is not doing nothing.

A:

Try this code:
$('button').on('click',function(){
 $("[data-filter=filter-documentary]").css({ 
       //your css code
  });
});

