Question

这是HTML：

<div class="message" data-userid="7">tada</div>
<div class="message" data-userid="7">tada</div>
<div class="message" data-userid="7">tada</div>
<div class="message" data-userid="7">tada</div>
<div class="message" data-userid="8">tada</div>
<div class="message" data-userid="7">tada</div>
<div class="message" data-userid="7">tada</div>

我需要确定最后5个userid是否相同，在这种情况下不是相同的。我该如何使用jQuery / Javascript？

我只知道如何获得第一和最后一个：

var firstid = parseInt($(".message:first").attr("userid"));
var lastid = parseInt($(".message:last").attr("userid"));

但是我需要最后一个5 ..

Answer 1

详细信息在下面的代码中注释：

const initialUsers = [...document.querySelectorAll("[data-userid]")]; // Elements with data-userid attributes

console.log(initialUsers.length); // initial length

const users = initialUsers.slice(initialUsers.length-5); // Slicing for last 5 elements

console.log(users.length); // checking length

const referenceUserId = users[0].dataset.userid; // taking value of data-userid as reference

const allAreSame = users.every( user => user.dataset.userid === referenceUserId ); // checking if all the 5 elements have same value for data-userid attribute

console.log(allAreSame); // If last 5 are same retuns true otherwise false

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="message" data-userid="7">tada</div>
<div class="message" data-userid="7">tada</div>
<div class="message" data-userid="7">tada</div>
<div class="message" data-userid="7">tada</div>
<div class="message" data-userid="8">tada</div>
<div class="message" data-userid="7">tada</div>
<div class="message" data-userid="7">tada</div>

Answer 2

要获取特定范围的元素，请使用jQuery's slice()。在您的情况下，您只需传递-5即可，因为负数被用作与选择项末尾的偏移量。

此后，只需获取任何元素的data属性值并将其与所有其他元素匹配即可。第一次不匹配时设置一个标志。然后测试该标志并采取相应措施

var allMatch = true;
var elements = jQuery(".message").slice(-5);

//gets the first element's data attribute
var value = elements.data("userid");

elements.each(function(){
  //uses the native dom dataset to get data attribute
  //no need to wrap the element in jQuery first
  if(this.dataset.userid!=value){
    allMatch = false;
    //breaks out of the each() iteration
    return false;
  }
});
console.log(allMatch);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="message" data-userid="7">tada</div>
<div class="message" data-userid="7">tada</div>
<div class="message" data-userid="7">tada</div>
<div class="message" data-userid="7">tada</div>
<div class="message" data-userid="7">tada</div>
<div class="message" data-userid="8">tada</div>
<div class="message" data-userid="7">tada</div>

Answer 3

//get the messages
var $messages = $('.message');
//get the last 5, or all of them if there are less than 5
var $last5 = $messages.slice(Math.max(0, $messages.length - 5));

//true if any of the userids does not match the first one
if ($last5.filter(function(){ return $(this).data('userid') !== $last5.eq(0).data('userid'); }).length > 0) {
  console.log('weee');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="message" data-userid="7">tada</div>
<div class="message" data-userid="7">tada</div>
<div class="message" data-userid="7">tada</div>
<div class="message" data-userid="7">tada</div>
<div class="message" data-userid="8">tada</div>
<div class="message" data-userid="7">tada</div>
<div class="message" data-userid="7">tada</div>

获取最后5个数据属性，并检查它们是否相同

3 个答案: