Question

我正在尝试获取HTML元素的数据属性的最高值和最低值。

为了更好地解释这一点，我创建了这个JSFIDDLE。

这是我的jQuery代码：

function minMaxId(selector) {
    var min=null, max=null;
    $(".allPro").each(function() {
        var price = parseInt((this).attr("data-price"), 10);
        if (isNaN(id)) { return; }
        if ((min===null) || (price < min)) { min = price; }
        if ((max===null) || (price > max)) { max = price; }
    });
    return [min, max];
}

alert(minMaxId('a'));

当我运行此代码时，我应该在警报窗口中获取最大值和最小值，但由于某种原因我什么也得不到！

我做错了什么？

Answer 1

这是您期望的代码。为什么使用参数

function minMaxId(selector) {
    var min=null, max=null;
    $(".allPro").each(function() {
        var price = parseInt($(this).attr("data-price"), 10);
        if (isNaN(price)) { return; }
        if ((min===null) || (price < min)) { min = price; }
        if ((max===null) || (price > max)) { max = price; }
    });
    return [min, max];
}

函数内部没有使用你传递的参数

Answer 2

以下是您的代码编辑：函数不应该有自变量。所以我在你的代码中添加了attrName和固定选择器。

function minMaxId(selector,attrName) {
    var min=null, max=null;
    $(selector).each(function() {
        var price = parseInt($(this).attr(attrName), 10);
        if (isNaN(price)) { return; }
        if ((min===null) || (price < min)) { min = price; }
        if ((max===null) || (price > max)) { max = price; }
    });
    return [min, max];
}

alert(minMaxId(".allPro","data-price"));

Answer 3

首先，你做错了什么：你返回一个数组，以便访问它。将警报更改为alert(minMaxId('a')[0]);警报最小值; alert(minMaxId('a')[1]);和最大值。

var mythings = minMaxId('a');
alert("Min:" + mythings[0] + " Max:" + mythings[1]);

修改为使用基本数字而非parseint，使用选择器，而不是数组的对象：

function minMaxId(selector) {
    var min=null, max=null;
    $(selector).each(function() {
        var price = Number($(this).data("price"));
        if (isNaN(price)) { return; }
        if ((min===null) || (price < min)) { min = price; }
        if ((max===null) || (price > max)) { max = price; }
    });
    return {Min:min, Max:max};
}
var prices = minMaxId('a.allPro')
alert("Min:"+prices.Min+" Max:"+prices.Max);

好的，这很可能会为你的目的而方式过度，但你可以根据需要选择好的部分。

我在你的小提琴中注意到你使用的价格不是整数然后解析为整数？所以我们在解析函数中修复它 - 根据你的需要改进和改变它，但基本上它处理更多/更好的数字（不完美但你可以从它开始）。有可能的库可以更广泛地执行此操作，您可以查看更多示例。

其次，你可能希望拥有多个列表，或者其他什么，我向您展示如何为该列表中的价格创建一个具有最小值/最大值的实例。如果您需要或重构使用该部分，请使用该部分。

这是一个点击处理程序等的小提琴，所以你可以玩它：http://jsfiddle.net/MarkSchultheiss/gcgcqc8d/

一些标记（修订）与一些不同的＆＃34;价格＆＃34;用来说明解析和价格组合＃34;概念

<div id="pricelist" class="pricelist">
<a class="allPro" data-price="119.99">19.99</a>
<a class="allPro" data-price="115.99">15.99</a>
<a class="allPro" data-price="150">$50</a>
<a class="allPro" data-price="118">18</a>
<a class="allPro" data-price="120.500">20.500</a>
<a class="allPro" data-price="116">6</a>
<a class="allPro" data-price="111.40">1.40</a>
<a class="allPro" data-price="$110.50">$0.50</a>
<a class="allPro" data-price="110.02">-0.02</a>
<a class="allPro" data-price="empty-)">empty</a>
<a class="allPro" data-price="$110.11)">$0.08</a>
</div>
<div id="pricelist2" class="pricelist">
<a class="allPro" data-price="19.99">19.99</a>
<a class="allPro" data-price="15.99">15.99</a>
<a class="allPro" data-price="50">$50</a>
<a class="allPro" data-price="18">18</a>
<a class="allPro" data-price="20.500">20.500</a>
<a class="allPro" data-price="6">6</a>
<a class="allPro" data-price="1.40">1.40</a>
<a class="allPro" data-price="$0.50">$0.50</a>
<a class="allPro" data-price="0.02">-0.02</a>
<a class="allPro" data-price="23e+2">empty</a>
<a class="allPro" data-price="($0.1)">$0.08</a>
</div>

以下是代码：

"use strict";
function makeClassStrict() {
    var isInternal, instance;
    var constructor = function (args) {
        if (this instanceof constructor) {
            if (typeof this.init == "function") {
                this.init.apply(this, isInternal ? args : arguments);
            }
        } else {
            isInternal = true;
            instance = new constructor(arguments);
            isInternal = false;
            return instance;
        }
    };
    return constructor;
}
var PriceClass = makeClassStrict();
PriceClass.prototype.init = function (siblingselector, groupselector, min, max) {
    var defaultSelector = '.allPro';
    var defaultGroupSelector = '.pricelist';
    this.defaultMin = null;
    this.defaultMax = null;
    this.defaultPrice = null;
    this.selector = siblingselector ? siblingselector : jQuery(defaultSelector).first();
    this.groupSelector = groupselector ? groupselector : jQuery(defaultGroupSelector).first();
    this.min = min ? min : this.defaultMin;
    this.max = max ? max : this.defaultMax;
    this.priceData = "price";
    this.Prices = [];
    this.ReturnjQuerySelector = function (selector) {
        if (selector instanceof jQuery) {
            return selector;
        } else {
            return jQuery(selector);
        }
    };
    this.SetMinMaxPrice(this.selector);
};
PriceClass.prototype.ParsePrice = function (stringPrice) {
    /* will remove all non digits and leave dots and dashes */
    this.regex = (/[^0-9\.\-]+/g);
    var me = this;
    var priceStr = stringPrice + "";
    var number = Number(priceStr);//handle scientific notation like 2e+5
    /* leading parenthesis change to dash */
    /* remove all non digits and leave dots and dashes */
    number = isNaN(number) ? Number(priceStr.replace('(', '-').replace(me.regex, "")) : number;
    return number;
};
/* sets the array of prices */
PriceClass.prototype.SetPrices = function (selector) {
    var me = this;
    var myselector = me.ReturnjQuerySelector(selector);
    myselector.siblings().addBack().each(function () {
        var myprice = me.ParsePrice($(this).data(me.priceData));
        if (isNaN(myprice)) {
            /* return a default price */
            var price = {
                Description: $(this).text(),
                Price: me.defaultPrice
            };
            me.Prices.push(price);
        } else {
            var price = {
                Description: $(this).text(),
                Price: myprice
            };
            me.Prices.push(price);
        }
    });
};
PriceClass.prototype.SetMinMaxPrice = function (selector) {
    var self = this;
    var myselector = self.ReturnjQuerySelector(selector);
    self.SetPrices(myselector);
    var i = 0;
    for (; i < self.Prices.length; i++) {
        var myprice = self.Prices[i].Price;
        if ((self.min === self.defaultMin) || (myprice < self.min)) {
            self.min = myprice;
        }
        if ((self.max === self.defaultMax) || (myprice > self.max)) {
            self.max = myprice;
        }
    }
};
$('.pricelist').on('click', '.allPro', function (event) {
    event.stopPropagation();
    event.stopImmediatePropagation();
    /* create and process instance */
    var newprices = PriceClass($(this));
    $('#result').html("MinMax min:" + newprices.min + "<br /> max:" + newprices.max);
});
// change one list to display the price values as text
$('#pricelist').find('.allPro').each(function () {
    $(this).text($(this).data('price'));
});
console.clear();
/* sets a price using the first group */
$('.allPro').eq(0).trigger('click');

数据属性jquery的最高和最低？

3 个答案: