title: jQuery get element by data id
body: <p>I am trying the get an <code>&lt;li&gt;</code> element by data attribute value (data-event_id=1282).</p>
  
  <pre><code>&lt;div id="timeline"&gt;
      &lt;ul&gt;
          &lt;li class="timeline-event"&gt;
               &lt;div&gt;Event Body&lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  $el = $('#timeline ul').find("li.timeline-event").data('event_id');
  console.log($el);    // returns 1282
  
  $el = $('#timeline ul').find("li.timeline-event[data-event_id='1282']").html();
  console.log($el);    // returns undefined
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p><strong>EDIT - Solution</strong></p>
  
  <p>The data is set using .data('event_id', '1282') elsewhere in the code.</p>
  
  <p>jQuery is unable to get the data if it is set using .data().</p>
  
  <p>I found the solution here using the filterByData function by @psycho brm. It works!</p>
  
  <p><a href="https://stackoverflow.com/questions/4191386/jquery-how-to-find-an-element-based-on-a-data-attribute-value/15651670#15651670">jQuery how to find an element based on a data-attribute value?</a></p>
  
  <pre><code>$.fn.filterByData = function(prop, val) {
      return this.filter(
          function() { return $(this).data(prop)==val; }
      );
  }
  </code></pre>
  
  <p>I presume this must be a jQuery bug though?</p>