Clearing div border with jQuery

Question

Clearing div border with jQuery

Navigation

#1 by (1 votes)

1

How do I clear the border of a DIV in Loop with jQuery?

For example, I'm having a modal, looping data from the database with Json, I have a button to select every item returned from that list, so I did the following, I created a class name: border_310

php javascript jquery

asked by anonymous 21.06.2018 / 02:35

1 answer

Get file size in Delphi even while in use How to start an array with the value that the user type is possible?

score 1 · Accepted Answer

Change the class from div to, leaving only borda :

<div class="product borda">

And jQuery:

$(document).on("click", "a.selecionar_jogo", function (e) {
   e.preventDefault();
   $(".product.borda")
   .css("border", "none");

   $(this)
   .closest('.product.borda')
   .css('border', '2px solid red');
});

Then you can remove this data-id_select if it does not work at all.

Example:

$(document).on("click", "a.selecionar_jogo", function (e) {
   e.preventDefault();
   $(".product.borda")
   .css("border", "none");
   
   $(this)
   .closest('.product.borda')
   .css('border', '2px solid red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="col-md-3 li">
     <div class="product borda">
         <ul class="product-labels"> 
             <li>' + data.dados[a].aluguei + '</li>
         </ul>
         <div class="product-img-wrap">
             <img class="product-img-primary" style="height:150px;" src="<?= BASE; ?>/uploads/' + data.dados[a].post_cover + '" alt="' + data.dados[a].post_title + '" title="' + data.dados[a].post_title + '" />
             <img class="product-img-alt" style="height:150px;" src="<?= BASE; ?>/uploads/' + data.dados[a].post_cover + '" alt="' + data.dados[a].post_title + '" title="' + data.dados[a].post_title + '" />
         </div>
         <div class="product-caption">
             <h5 class="product-caption-title">' + data.dados[a].post_title + '</h5>
             <div class="product-caption-price">
                 <span class="product-caption-price-new">
                     <a data-id_select="' + data.dados[a].post_id + '" class="btn btn-primary selecionar_jogo disabled_'+ data.dados[a].post_id +'" href="#">Selecionar</a>
                 </span>
             </div>
         </div>
     </div>
     <div class="product borda">
         <ul class="product-labels"> 
             <li>' + data.dados[a].aluguei + '</li>
         </ul>
         <div class="product-img-wrap">
             <img class="product-img-primary" style="height:150px;" src="<?= BASE; ?>/uploads/' + data.dados[a].post_cover + '" alt="' + data.dados[a].post_title + '" title="' + data.dados[a].post_title + '" />
             <img class="product-img-alt" style="height:150px;" src="<?= BASE; ?>/uploads/' + data.dados[a].post_cover + '" alt="' + data.dados[a].post_title + '" title="' + data.dados[a].post_title + '" />
         </div>
         <div class="product-caption">
             <h5 class="product-caption-title">' + data.dados[a].post_title + '</h5>
             <div class="product-caption-price">
                 <span class="product-caption-price-new">
                     <a data-id_select="' + data.dados[a].post_id + '" class="btn btn-primary selecionar_jogo disabled_'+ data.dados[a].post_id +'" href="#">Selecionar</a>
                 </span>
             </div>
         </div>
     </div>
 </div>