Jquery - add data with to element and get element by added data

Can i get and element by data added with jquery? For Example

   function first() {
    var modal_body = $('.modal-body');
    modal_body.data('id',4)
   }
   
   function second() {
    var modal_body = $('.modalbody[data-id=4]');
   }
    
   

I've already tried this example, but it doesn't work because the element doesn't have data-id. Jquery saves data internally and creates an empty object called $.cache.

Is there any posibility to get the element, which contains data added with Jquery?

Unfortunately, no.

As you said, the data properties are added internally by jQuery. The only way to achieve what you want is to set attributes directly:

   function first() {
     var modal_body = $('.modal-body');
     modal_body.attr('data-id',4)
   }

   function second() {
    var modal_body = $('.modal-body[data-id=4]'); // note: fixed .modalbody to .modal-body
   }

Which makes it available as .data('id') as well.

Another alternative would be to use .filter():

   function first() {
     var modal_body = $('.modal-body');
     modal_body.data('id',4)
   }
   function second() {
    var modal_body = $('.modal-body').filter(function () {
      return $(this).data('id') === 4;
    });
   }

Demo below.

(() => {
  var modal_body = $('div.modal-body');
  modal_body.attr('data-id', 4)

  console.log('found using attr:', $('.modal-body[data-id=4]').length);
})();

(() => {
  var modal_body = $('span.modal-body');
  modal_body.data('id', 4)

  console.log('found using filter:', $('span.modal-body').filter(function() {
    return $(this).data('id') === 4;
  }).length);
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="modal-body">modal-body</div>

<span class="modal-body">modal-body</span>