$('[data-target="#exampleModal"]').on("click", function () { var element = $(this).parent(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="row"> <div class="col-md-4 col-lg-3" id=""> <button data-toggle="modal" data-target="#exampleModal"> <img src="./img/watch-page.png" alt="" class="w-100" /> </button> </div> <div class="col-md-4 col-lg-3"> <button data-toggle="modal" data-target="#exampleModal"> <img src="./img/watch-page.png" alt="" class="w-100" /> </button> </div> <div class="col-md-4 col-lg-3"> <button data-toggle="modal" data-target="#exampleModal"> <img src="./img/search-page.png" alt="" class="w-100" /> </button> </div> </div> ¿Cómo puedo averiguar el orden del element para todos los niños?
¿Y cómo puedo pasar al siguiente niño o al anterior?
Primero, no estabas seleccionando los elementos correctamente. Cuando usted llama
$('[data-target="#exampleModal"]')Devuelve una matriz de elementos, por lo que debe recorrerlos y luego agregar eventos para hacer clic.
Puede ver a continuación, el índice es el orden del botón y el botón es el elemento para que pueda caminar desde allí para llegar al padre, etc.
$.each($('[data-target="#exampleModal"]'), function(index, button){ $(button).on("click", function () { var element = $(this).parent(); console.log(element); }); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="row"> <div class="col-md-4 col-lg-3" id=""> <button data-toggle="modal" data-target="#exampleModal"> <img src="./img/watch-page.png" alt="" class="w-100" /> </button> </div> <div class="col-md-4 col-lg-3"> <button data-toggle="modal" data-target="#exampleModal"> <img src="./img/watch-page.png" alt="" class="w-100" /> </button> </div> <div class="col-md-4 col-lg-3"> <button data-toggle="modal" data-target="#exampleModal"> <img src="./img/search-page.png" alt="" class="w-100" /> </button> </div> </div>