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

How can I get in jquery the second id, third, and fourth , etc

I’ve tried to get the second id of the div to delete a product, but whenever I list the "DVD product" in PHP, I just can get the first one. The second forward isn’t work. It only works when I delete the first. How can I fix that?

<?php foreach($dvdLists as $key => $dvdList) { ?>
   <div class="product-dvd" id="<?= $dvdList->id_dvd ?>">
      <input class="delete-checkbox" type="checkbox" name="checkDvd">
      <p> <?= $dvdList->sku ?>  </p>
      <p> <?= $dvdList->name ?> DVD </p>
      <p> <?= $dvdList->price?> $ </p>
      <p> Size: <?= $dvdList->size ?> MB </p>
  </div> 
<?php } ?>



$('#delete-product-btn').click(function(){
    if($("div.product-dvd > input.delete-checkbox").is(':checked')) { 
        var getId = $('[class="product-dvd"]').attr('id');
       alert('your id='+getId);
    }
});
Tags:

3

Answers


  1. 0

    First you need to go through all the divs and get the selected IDs. You can delete them one by one, or you can delete them collectively by collecting the IDs and sending them to the backend at once.

    $('.product-dvd').each(function() {
    if ($(this).find('.delete-checkbox').is(':checked')){
        let getId = $(this).attr('id');
        alert('delete: ' + getId);
    }
});
    Login or Signup to reply.
  2. 0

    The issue is that .attr() only evaluates the first element.

    Also note that .is() will return true if at least one element matches the condition, so your current code ends up with all checkboxes if just one box is checked.

    I think you have two options here, either select all div.product-dvd and then filter by checked checkbox or select all checked checkboxes and the go up to the div.product-dvd.

    To select all div.product-dvd and then filter by checked checkbox, use .has():

    const ids = $('div.product-dvd')
  .has('.delete-checkbox:checked')
  .map(function(index, element){
    return $(element).attr('id')
  }).toArray()

    $('#delete-product-btn').click(function() {
  const ids = $('div.product-dvd')
    .has('.delete-checkbox:checked')
    .map(function(index, element){
      return $(element).attr('id')
    }).toArray()
  console.clear()
  console.log('Deleting', JSON.stringify(ids))
});
    <div class="product-dvd" id="product-1">
  <label>
    <input class="delete-checkbox" type="checkbox" name="checkDvd">
    Product 1
  </label>
</div>

<div class="product-dvd" id="product-2">
  <label>
    <input class="delete-checkbox" type="checkbox" name="checkDvd">
    Product 2
  </label>
</div>

<div class="product-dvd" id="product-3">
  <label>
    <input class="delete-checkbox" type="checkbox" name="checkDvd">
    Product 3
  </label>
</div>
<div>
  <button id="delete-product-btn">delete</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    To select all checked checkboxes and the go up to the div.product-dvd, use .closest():

    const ids = $('div.product-dvd > input.delete-checkbox:checked')
  .closest('.product-dvd')
  .map(function(index, element){
    return $(element).attr('id')
  }).toArray()

    $('#delete-product-btn').click(function() {
  const ids = $('div.product-dvd input.delete-checkbox:checked')
    .closest('.product-dvd')
    .map(function(index, element){
      return $(element).attr('id')
    }).toArray()
  console.clear()
  console.log('Deleting', JSON.stringify(ids))
});
    <div class="product-dvd" id="product-1">
  <label>
    <input class="delete-checkbox" type="checkbox" name="checkDvd">
    Product 1
  </label>
</div>

<div class="product-dvd" id="product-2">
  <label>
    <input class="delete-checkbox" type="checkbox" name="checkDvd">
    Product 2
  </label>
</div>

<div class="product-dvd" id="product-3">
  <label>
    <input class="delete-checkbox" type="checkbox" name="checkDvd">
    Product 3
  </label>
</div>
<div>
  <button id="delete-product-btn">delete</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    Login or Signup to reply.
  3. 0

    You can use eq function and pass the index 1 in this case to get second element.

    $('#delete-product-btn').click(function(){
    var secondDiv = $("div.product-dvd").eq(1);
    if(secondDiv.find("input.delete-checkbox").is(':checked')) { 
        var getId = secondDiv.attr('id');
       alert('your id='+getId);
    }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search