使用jquery比较相同的div类名称值

时间:2016-09-22 08:31:24

标签: jquery html

我找到了如何比较具有相同类名的其他div标签上<div>的值。所以,我想在jquery中做这件事。以下是我要比较的<div class="helloword" value="4"> </div> <div class="helloword" value="3"> </div> <div class="helloword" value="2"> </div> <div class="helloword" value="1"> </div> 代码的示例;

<body>
  <div id="inner_body">
    <div>
      Animate button below me!
    </div>
    <button class="bc" id="0" style="margin-top:250px">Botton A</button>  
    <button  class="bc" id="1" style="margin-top:250px">Botton B</button>
    <button class="bc" id="2">Botton C is below buton A and button B</button>
  </div>
</body>


$(document).on('click', '.bc', function() {
  var x = [];
  var y = [];
  //Saving original position
  for (var i = 0; i < 3; i = i + 1) {
    x[i] = $('#' + i + '').position().left;
    y[i] = $('#' + i + '').position().top;
  }

  //Locating all buttons with absolute position
  for (var i = 0; i < 3; i = i + 1) {
    $('#' + i + '').css({
      'position': 'absolute',
      'top': y[i] + 'px',
      'left': x[i] + 'px'
    })
  }

  //Hiding other buttons
  for (var i = 0; i < 3; i = i + 1) {
    if (i != this.id) {
      $('#' + i + '').remove();
    }
  }

  //Animating our buttons
  $(this).animate({
    left: 0,
    marginTop: 0,
    top:20 //added code here
  }, "slow");

});

我想比较一个具有最小价值的类别。那可能吗?

4 个答案:

答案 0 :(得分:2)

您可以使用map()Math.min.apply()获取最小值。

var min = Math.min.apply(null, $('.helloword').map(function() {
  return parseInt($(this).attr('value'))
}))

console.log(min)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="helloword" value="4"></div>
<div class="helloword" value="3"></div>
<div class="helloword" value="2"></div>
<div class="helloword" value="1"></div>

答案 1 :(得分:1)

使用类选择器获取所有div并使用.each()循环遍历它们,未经测试的代码如下:

    var min = 10, minElement = '';
    $('.helloword').each(function(){
        var value = parseInt($(this).attr("value"));
        if (value < min) {
            min = value;
            minElement = $(this);
        }
    });
    // using minElement

答案 2 :(得分:1)

您需要按类别选择所有div,然后循环遍历它们并保持指向您目前找到的最低值的指针:

var lowestVal = 100; //set this higher than your max value
var divs = $(".helloword"); //select all the elements by their class

//loop through each item and compare it to the lowest recorded one
divs.each(function(index, element) {
  var val = parseInt($(element).attr("value"));
  if (val < lowestVal) lowestVal = val;
});

现在,您可以根据需要使用lowestVal。

答案 3 :(得分:1)

function GetSmallestValue(itemValue)
{
  $(".helloword").each(function (a, b) {
    var newValue = $(this).attr("value");
    if (itemValue==0 || newValue < itemValue) {
      itemValue = newValue;
    }            
  });

  return itemValue;
}

var itemValue = GetSmallestValue(0);
console.log(itemValue);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="helloword" value="4"> </div>
<div class="helloword" value="3"> </div>
<div class="helloword" value="2"> </div>
<div class="helloword" value="1"> </div>