¿Cómo puedo seleccionar el último div de los grupos div con el mismo ID de datos? Intenté usar .last y obtener el último div con: contiene pero no funcionó.

Html:

<div class="rentals_reservation" data-id="3407">Booking id: 3407</div>
<div class="rentals_reservation" data-id="3407">Booking id: 3407</div>
*<div class="rentals_reservation" data-id="3407">Booking id: 3407</div>
<div class="rentals_reservation" data-id="3227">Booking id: 3227</div>
<div class="rentals_reservation" data-id="3227">Booking id: 3227</div>
*<div class="rentals_reservation" data-id="3227">Booking id: 3227</div>

Jquery:

$(".rentals_reservation").each(function(i, value) {
        var id = $(value).attr("data-id").;
        console.log(id);
    })
4
ShabbyAbby 31 oct. 2017 a las 00:05

6 respuestas

La mejor respuesta

No queda del todo claro a partir de la pregunta, pero parece que desea seleccionar todos los últimos divs de los que tienen la misma identificación de datos. es decir, el 2 que ha marcado con un "*".

Puedes:

  • obtener una lista única de ID
  • recorrer para devolver los elementos

El fragmento a continuación hace esto y oculta los elementos (para mostrar que los ha seleccionado).

//https://stackoverflow.com/a/33121880/2181514
var ids = $(".rentals_reservation").map(function() { return $(this).data("id"); }).toArray();
var uniqueids =  [...new Set(ids)]
var lastdivs = $(uniqueids).map(function() { return $("[data-id=" + this + "]").last()[0] });
$(lastdivs).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rentals_reservation" data-id="3407">Booking id: 3407</div>
<div class="rentals_reservation" data-id="3407">Booking id: 3407</div>
<div class="rentals_reservation" data-id="3407">Booking id: 3407*</div>
<div class="rentals_reservation" data-id="3227">Booking id: 3227</div>
<div class="rentals_reservation" data-id="3227">Booking id: 3227</div>
<div class="rentals_reservation" data-id="3227">Booking id: 3227*</div>
1
freedomn-m 30 oct. 2017 a las 21:20

Solo forma un objeto. El ID de datos es una clave y un elemento en sí mismo como un valor. Después del bucle, cada elemento en el objeto apunta al último elemento con el atributo "tal" data-id:

var dataIdsMap = {};
$(".rentals_reservation").each(function(i, value) {
        var id = $(value).attr("data-id").;
        dataIdsMap[id] = $(value);

    })
 console.log(dataIdsMap);
2
Andriy Ivaneyko 30 oct. 2017 a las 21:14

Esta lógica obtiene todos los identificadores, los reduce a los únicos y finalmente encuentra el último elemento para cada identificador.

var $allReservations = $('.rentals_reservation');

console.log(
$allReservations.map(function getTheIds(){
  return this.getAttribute('data-id');
}).get().reduce(function getTheUniqueIds(collection, element){
  if (collection.indexOf(element) < 0) collection.push(element);
  return collection;
}, []).map(function findTheLastElementForEachId(element){
  return $allReservations.filter('[data-id="'+ element +'"]').last();
})
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rentals_reservation" data-id="3407">Booking id: 3407</div>
<div class="rentals_reservation" data-id="3407">Booking id: 3407</div>
*<div class="rentals_reservation" data-id="3407">Booking id: 3407</div>
<div class="rentals_reservation" data-id="3227">Booking id: 3227</div>
<div class="rentals_reservation" data-id="3227">Booking id: 3227</div>
*<div class="rentals_reservation" data-id="3227">Booking id: 3227</div>
1
Taplar 30 oct. 2017 a las 21:17

Intentalo. Te puede ayudar;

var last = $(".rentals_reservation").last().data("id");
var values = [];
$(".rentals_reservation").each(function(i, v){
  if($(this).data("id") === last){
    values.push($(this).data("id"));
  }
})

console.log(values);
#result{
  color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="rentals_reservation" data-id="3407">Booking id: 3407</div>
<div class="rentals_reservation" data-id="3407">Booking id: 3407</div>
*<div class="rentals_reservation" data-id="3407">Booking id: 3407</div>
<div class="rentals_reservation" data-id="3227">Booking id: 3227</div>
<div class="rentals_reservation" data-id="3227">Booking id: 3227</div>
*<div class="rentals_reservation" data-id="3227">Last One Booking id: 3227</div>

<br /><br />
<div id="result"></div>
0
Rodrigo de Farias 30 oct. 2017 a las 21:40

Para optimizar su selección, creo que un array puede ayudar, consulte la siguiente demostración, en la que empiezo a almacenar un valor único de cada id en una matriz y luego selecciono el último div con el mismo id:

var existingIds=[];
var selectedElements=[];
$(".rentals_reservation").each(function(i, value) {
        
         if( !existingIds.includes($(value).data("id")) )
         {
           existingIds.push($(value).data("id"));
          
           selectedElements.push($(".rentals_reservation[data-id='"+$(value).data("id")+"']:last"));
         }         
    })
    console.log(existingIds);
    $.each(selectedElements,function(index, element){
     console.log($(element).text());
    
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rentals_reservation" data-id="3407">1.Booking id: 3407</div>
<div class="rentals_reservation" data-id="3407">2.Booking id: 3407</div>
<div class="rentals_reservation" data-id="3407">3.Booking id: 3407</div>
<div class="rentals_reservation" data-id="3227">1.Booking id: 3227</div>
<div class="rentals_reservation" data-id="3227">2.Booking id: 3227</div>
<div class="rentals_reservation" data-id="3227">3.Booking id: 3227</div>
0
Mehdi Bouzidi 30 oct. 2017 a las 21:32

Bueno, puedes hacer un selector y seleccionar los elementos y seleccionar el último

console.log($('[data-id="' + id + '"]').last())
2
epascarello 30 oct. 2017 a las 21:11