获取具有相同数据属性的最后一个div

How can I select the last div from div groups with the same data-id? I tried to use .last and get last div with :contains but didn't worked.

如何从具有相同数据id的div组中选择最后一个div ?我尝试使用。last和get last div:contains，但是没有工作。

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);
    })

6 个解决方案

#1

It's not entirely clear from the question, but sounds like you want to select all of the last divs from the ones that have the same data-id. ie the 2 that you have marked with a "*".

这个问题并不是完全清楚，但是听起来你想要从拥有相同数据id的那些中选择所有的最后的div。你用"*"标记的2。

You can:

您可以:

get a unique list of IDs
获取唯一的id列表
loop through to return the elements
循环返回元素

snippet below does this and hides the elements (to show it's selected them).

下面的代码片段就这样做了，并隐藏了元素(以显示它选择了这些元素)。

//https://*.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>

#2

Well you can make a selector and select the elements and select the last one

你可以做一个选择器，选择元素然后选择最后一个

console.log($('[data-id="' + id + '"]').last())

#3

Just form an object. The data-id is a key and element itself as a value. After loop each item in the object points to the latest element with "such" data-id attribute:

就形成一个对象。数据id是一个键，元素本身就是一个值。在循环之后，对象中的每一项都指向具有“此类”数据id属性的最新元素:

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

    })
 console.log(dataIdsMap);

#4

This logic gets all the ids, reduces them to the unique ones, and finally finds the last element for each id.

这个逻辑获取所有的id，将它们减少到唯一的id，最后找到每个id的最后一个元素。

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>

#5

To optimize your selection I think an array can help, please check the following demo, in which I start to store a unique value of each id in an array and then select the last div with the same id:

为了优化你的选择，我认为一个数组可以帮助，请检查下面的demo，在这个演示中，我开始在一个数组中存储每个id的唯一值，然后用相同的id选择最后一个div:

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>

#6

Try It. It may help you;

试一试。它可以帮助你;

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>

#1