Using Jquery's closest technique to target a class located outside of the parent div

Question

Using Jquery's closest technique to target a class located outside of the parent div

I am having trouble accessing a class outside of its parent div

$(document).on('click', '.delete_photo', function(event){
  var del_id = $(this).attr('id');
  $.ajax({
    type:'POST',
    cache: false,
    url:'delete-photo.php',
    data:'delete_id='+del_id,
    beforeSend:function(){
       $(event.target).closest('.photo-over').show();
    },
    success:function(data) {
      $('.editor-photo').load(document.URL + ' .editor-photo-list');
    }
 });

});

Below is the HTML:

<div class="row editor-photo-list">
   {foreach from=$row item=$image_file}
      <div class="col-md-4" style="margin-bottom: 20px;">

         <div class="photo-list">
               <input id="{$image_file.id}" type='image' src='http://demo1.demaxglobal.com/content/uploads/editor-images/{$image_file.path}' value='Edit photo' onclick="return launchEditor('{$image_file.id}', 'http://demo1.demaxglobal.com/content/uploads/editor-images/{$image_file.path}');">

               <div class="photo-over">
                   <div class="line"></div>    
                   <div class="line"></div>    
                   <div class="line"></div>    
                   <div class="line"></div>    
              </div> 
           </div>

           <div class="col-md-12 photo-edit-option">                                                  
               <div class="col-md-4 photo-btn">
                   <div id="{$image_file.path}" class="delete_photo"><img src="../content/themes/default/images/close-button.png">
                   </div>
               </div>
               <div class="col-md-4 photo-btn">
                  <input id="{$image_file.id}" type='image' src='../content/themes/default/images/photo-edit.png' value='Edit photo' onclick="return launchEditor('{$image_file.id}', 'http://demo1.demaxglobal.com/conten/uploads/editor-images/{$image_file.path}');">
               </div>
               <div class="col-md-4 photo-btn">
                    <div class="post_photo-submit" id="{$image_file.path}">
                        <img src="../content/themes/default/images/the-flash.png">
                    </div>
               </div>


    </div>
</div>
{/foreach}

 </div>

Code Updated. Hopefully this provides additional insight.

I am looking to display the div photo-over when the div delete-photo is clicked. I have tried using jQuery's parent() and find() methods, but they haven't worked for me.

There are multiple divs with the same class name. When I remove the closest method, the photo-over div appears on all the DIVs.

Thank you

javascript jquery html css

Answer 1

Answer №1

To enhance this line of code, I suggest including a functional class that acts as the container for each item. This corresponds to line 5 in your provided example:

<div class="col-md-4 product-container" style="margin-bottom: 20px;">

Once you have added this class, you can then access it in your callbacks using the following syntax:

$(event.target).parents('.product-container').find('.image-list').find('.image-overlay').show()

In the future, remember to make it easier for others to assist you by providing runnable code snippets on platforms like JSFiddle or CodePen. For more details, please refer to this helpful resource.

Answer 2

To enhance this line of code, I suggest including a functional class that acts as the container for each item. This corresponds to line 5 in your provided example:

<div class="col-md-4 product-container" style="margin-bottom: 20px;">

Once you have added this class, you can then access it in your callbacks using the following syntax:

$(event.target).parents('.product-container').find('.image-list').find('.image-overlay').show()

In the future, remember to make it easier for others to assist you by providing runnable code snippets on platforms like JSFiddle or CodePen. For more details, please refer to this helpful resource.

Answer 3

Answer №2

If you have the location details, you can achieve this using vanilla JavaScript, ensuring correct pathing:

Array.from(document.querySelectorAll(".delete_photo")).map(el => {
  el.onclick = e => {
    const phOver = el.parentElement.previousSibling.querySelector('.photo-over')
    // send your Ajax request and then execute `$(phOver).show()`
  }
})

When using jQuery, the process should be simplified to:

$(".delete_photo").click(function(e) {
  const sec = $(this).parent().prev()
  // make your Ajax request, followed by `$(".photo-over", sec).show()`
})

Answer 4

If you have the location details, you can achieve this using vanilla JavaScript, ensuring correct pathing:

Array.from(document.querySelectorAll(".delete_photo")).map(el => {
  el.onclick = e => {
    const phOver = el.parentElement.previousSibling.querySelector('.photo-over')
    // send your Ajax request and then execute `$(phOver).show()`
  }
})

When using jQuery, the process should be simplified to:

$(".delete_photo").click(function(e) {
  const sec = $(this).parent().prev()
  // make your Ajax request, followed by `$(".photo-over", sec).show()`
})

Answer 5

Answer №3

To find the necessary .photo-over element, you will need to use a combination of the parent(), prev(), and find() methods.

The code snippet

$(event.target).parent().parent().prev().find('.photo-over')

is used to navigate to the directly preceding .photo-over element.

Here is an example that should help:

$(document).on('click', '.delete_photo', function(event) {
  var del_id = $(this).attr('id');
  $.ajax({
    type: 'POST',
    cache: false,
    url: 'delete-photo.php',
    data: 'delete_id=' + del_id,
    beforeSend: function() {
      $(event.target).parent().parent().prev().find('.photo-over').show();
    },
    success: function(data) {
      $('.editor-photo').load(document.URL + ' .editor-photo-list');
    }
  });
});

Answer 6

To find the necessary .photo-over element, you will need to use a combination of the parent(), prev(), and find() methods.

The code snippet

$(event.target).parent().parent().prev().find('.photo-over')

is used to navigate to the directly preceding .photo-over element.

Here is an example that should help:

$(document).on('click', '.delete_photo', function(event) {
  var del_id = $(this).attr('id');
  $.ajax({
    type: 'POST',
    cache: false,
    url: 'delete-photo.php',
    data: 'delete_id=' + del_id,
    beforeSend: function() {
      $(event.target).parent().parent().prev().find('.photo-over').show();
    },
    success: function(data) {
      $('.editor-photo').load(document.URL + ' .editor-photo-list');
    }
  });
});

Using Jquery's closest technique to target a class located outside of the parent div

Answer №1

Answer №2

Answer №3

Similar questions

guide on implementing a horizontal scrolling/swipe navbar with Cordova

Is it possible for the req.url path in expressjs to represent a different URL?

Is it possible to implement CSS code from a server request into a React application?

Having trouble running classes using Maven test with the Testng.xml file in the terminal, however, it runs smoothly in Eclipse

Looking for assistance with implementing touch gestures on an HTML website?

Exploring the combined application of the AND and OR operators in JavaScript programming

Unveiling the information retrieved from an AJAX request during page load

Browserify is unable to locate the 'jquery' module

MVC.NET: Offering User-Friendly Loading of Initial x Items with an Option to Load More

Implementing the Upload Feature using AngularJS

`Proliferating values through constantly changing addition`

Generating an interactive table using JSON with Angular 5

Issues with parsing application/json data in NodeJS using Express

Tips for implementing resizable Material-UI Dialogs

When the state of the grandparent component is updated, the React list element vanishes in the grandchild component. Caution: It is important for each child in a list to have a unique

The addition of a cancel swipe feature to an HTML5 eBook is causing the text input field for note-taking to malfunction

Error handling: Encountered unexpected issues while parsing templates in Angular 2

Display a PDF document within a div using jQuery or AngularJS

passport.authenticate method fails due to empty username and password values

How can you make the contents of a <DIV> expand?