0

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?

Valentin Emil Cudelcu
  • 659
  • 1
  • 7
  • 24
  • change `$('.modalbody[data-id=4]');` to `$('.modal-body[data-id=4]');` – Alive to die - Anant Mar 23 '18 at 10:59
  • @AlivetoDie That's an attribute selector, but there's no `data-id` attribute in the markup, hence this doesn't work. – Andreas Mar 23 '18 at 11:01
  • @Andreas that suggest dup is the exact opposite of your earlier comment - there is no data- attribute. – freedomn-m Mar 23 '18 at 11:07
  • @freedomn-m The question has answers that match exactly this requirement: https://stackoverflow.com/a/15651670/402037, https://stackoverflow.com/a/22209579/402037 – Andreas Mar 23 '18 at 11:09
  • @Andreas thanks for clarifying - the question itself is not the same, nor is the answer - but as you say, there are suitable and relevant responses – freedomn-m Mar 23 '18 at 11:13

2 Answers2

2

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>
acdcjunior
  • 132,397
  • 37
  • 331
  • 304
1

Not with a single selector, but certainly using .filter():

$("#x").data("data", "a");
$("#y").data("data", 4);

var x2 = $("div").filter(function() {
    return $(this).data("data") != null;
});

var y4 = $("div").filter(function() {
    return $(this).data("data") === 4;
});

console.log("Divs:", $("div").length, "With ID:", x2.length, "With id==4:", y4.length);
x2.addClass("box");
y4.addClass("box4");
div { border: 1px solid #CCC; }
.box { border: 1px solid green; }
.box4 { border: 1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='x'>x</div>
<div id='y'>y</div>
<div id='z'>y</div>

Update: check for explicit data value, not just any

freedomn-m
  • 27,664
  • 8
  • 35
  • 57