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

时间:2017-10-30 21:05:32

标签: javascript jquery html

如何从具有相同data-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);
    })

6 个答案:

答案 0 :(得分:2)

你可以制作一个选择器并选择元素并选择最后一个

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

答案 1 :(得分:2)

只需形成一个物体。 data-id是一个键,元素本身就是一个值。循环之后,对象中的每个项目都指向最新的元素&#34;这样的&#34; data-id属性:

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

    })
 console.log(dataIdsMap);

答案 2 :(得分:1)

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

&#13;
&#13;
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();
})
);
&#13;
<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>
&#13;
&#13;
&#13;

答案 3 :(得分:1)

问题并不完全清楚,但听起来你想要选择具有相同数据ID的所有最后一个div。即你标有&#34; *&#34;。

的2

你可以:

  • 获取唯一的ID列表
  • 循环返回元素
下面的

片段会执行此操作并隐藏元素(以显示它们已被选中)。

&#13;
&#13;
//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();
&#13;
<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>
&#13;
&#13;
&#13;

答案 4 :(得分:0)

为了优化您的选择,我认为var ans = from e in employee where e.employeeid == 1 join ord in orders on e.employeeId equals ord.employeeId into ordj from ord in ordj.DefaultIfEmpty() where ord.orderId == (from ord2 in orders where ord2.empIdentification == ord.empIdentification select orderId).Max() select new { e, ord }; 可以提供帮助,请查看以下演示,其中我开始在数组中存储每个array的唯一值,然后选择最后一个{{ 1}}具有相同的id

&#13;
&#13;
div
&#13;
id
&#13;
&#13;
&#13;

答案 5 :(得分:0)

试一试。它可能对你有帮助;

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>