同じデータ属性の最後のdivを取得

Question

同じデータIDを持つdivグループから最後のdivを選択するにはどうすればよいですか？ .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); 
    }) 

Answer 1

それは質問から完全には明らかではないのですが、あなたは、同じデータIDを持っているものから、最後のdiv要素のすべてを選択するように聞こえます。あなたが「*」でマークした2つ

あなたがすることができます

• が

スニペットは下記これを実行し、要素を隠し要素を返すために

ループを通るIDのユニークなリストを取得（それはそれらを選択しています表示します）。

//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>

Answer 2

さて、あなただけのオブジェクトを形成するセレクタを作成し、要素を選択し、最後の1

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

Answer 3

を選択することができます。 data-idはキーであり、要素自体は値です。ループ「など」data-id属性を持つ最新の要素へのオブジェクトポイントの各項目の後：

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

    }) 
console.log(dataIdsMap); 

Answer 4

は、このロジックは、すべての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>

Answer 5

あなたの選択を最適化するために、私はarrayは助けることができると思い、私はアレイ内の各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>

Answer 6

お試しください。それはあなたを助けるかもしれません。

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>