Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – check if a specific div exists by class and data attribute without looping all the elements with that class

I have several divs in my UI with the same class. Each of them has a different data-id.
I want to check if one of the divs has a specific value for the data-id.
I can do it with .each() but was wondering if there is a way not to iterate every time on all the divs.
If I find a div (by class and data-id value) I need to manipulate its content. If I don’t find any div that satisfy the two criteria then I will perform some different activities.

What I have now (works but iterates every time the Dom)

let found = false;
$('.discussion').each(function(){
    if($(this).data("id")==myVariable){
        //I have found what I am looking for
        //do my stuff
        found = true;
    }
});
if(found===false){
    //I have not found what I was looking for
    //so I will add the div with that class and data-id
}

There can be even more then 10 divs with that class and this event will fire even 100 times a minute so performance may be impacted.

Markup is the following:

<div id="conversations">
    <div class="conversation" data-id="a"></div>
    <div class="conversation" data-id="b"></div>
    <div class="conversation" data-id="c"></div>
    <div class="conversation" data-id="d"></div>
    <div class="conversation" data-id="e"></div>

</div>
Tags:

2

Answers


  1. 0

    One way to do this. Assumes ANY vs ONE here on length.
    Probably more verbose than needed just to be clear on intent.

    const myVariable = 'b';
// leverage the length as a truthy/falsy boolean
let found = !!$('#conversations').find('.conversation[data-id="' + myVariable + '"').length;
console.log('found:', found);
if (found) {
  console.log(found, $('#conversations').find('.conversation[data-id="' + myVariable + '"').first().get(0));
}
if (!found) {
  //I have not found what I was looking for
  //so I will add the div with that class and data-id
  console.log('found:', found);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="conversations">
  <div class="conversation" data-id="a"></div>
  <div class="conversation" data-id="b"></div>
  <div class="conversation" data-id="c"></div>
  <div class="conversation" data-id="d"></div>
  <div class="conversation" data-id="e"></div>

</div>
    Login or Signup to reply.
  2. 0 
    <html>

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

<body>
  <div>Sample Program</div>
  <div id="result"></div>

  <ul>
    <li id='test-1'>Click to test 1</li>
    <li id='test-2'>Click to test 2</li>
    <li id='test-3'>Click to test 3</li>
    <li id='test-5'>Click to test 5</li>
  </ul>


  <div class="test" data-id="test-1">Test 1</div>
  <div class="test" data-id="test-2">Test 2</div>
  <div class="test" data-id="test-3">Test 3</div>
  <div class="test" data-id="test-4">Test 4</div>
  <script>
    $('li').on('click', function() {
      doFunction($(this).attr('id'));
    });

    function doFunction(id) {
      if ($('.test[data-id="' + id + '"]').length) {
        console.log('Div found');
        $('#result').html('Data: ' + $('.test[data-id="' + id + '"]').html());
      } else {
        console.log('No div found with data-id equal to the ' + id);
        $('#result').html('No div found with data-id equal to the ' + id);
      }
    }
  </script>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search