Question

我有以下HTML，但一次只能出现一个：

<a id="menuRange" class="button" href="#">1 - 100</a>
<a id="menuRange" class="button" href="#">101 - 200</a>
<a id="menuRange" class="button" href="#">201 - 300</a>

我使用此代码获取范围：

var $field = $('#menuRange');
var nums = $field.text().split('-').map(function (a) {
    return parseInt(a, 10) + d * 100
});

现在我想将HTML更改为：

<a id="menuRange" class="button" href="#">Lines 1 - 100</a>
<a id="menuRange" class="button" href="#">Lines 101 - 200</a>
<a id="menuRange" class="button" href="#">Lines 201 - 300</a>

我怎样才能这样做，所以我仍然像以前一样得到数据。换句话说，怎么做我可以忽略“行”这个词，好像它不存在一样吗？

Answer 1

只需在.substring()之后加.text()：

var nums = $field.text().substring(6).split('-')...

即。只删除返回文本的前6个字符。

或者，如果前缀不总是存在：

var nums = $field.text().replace(/^Lines /, '').split('-')

Answer 2

如果您想完全自由地放置锚点的内容，请将代码用于计算的值移动到属性中。然后，您可以改变主意，看看用户看到的内容，而无需更改JS代码：

<a id="menuRange" class="button" href="#" data-lines="1-100">Lines 1 - 100</a>
<a id="menuRange" class="button" href="#" data-lines="101-200">Anything here</a>
<a id="menuRange" class="button" href="#" data-lines="201-300">still works</a>

var $field = $('#menuRange');
var nums = $field.attr("data-lines").split('-').map(function (a) {
    return parseInt(a, 10) + d * 100
});

您可以选择min和max的单独属性：

<a id="menuRange" class="button" href="#" data-min="1" data-max="100">Lines 1 - 100</a>

然后你可以单独检索它们而不是从单个字符串中分割出来：

var min = $field.attr("data-min"),  // to get it as a string
    max = $field.attr("data-max");  // use .attr()
// OR
var min = $field.data("min"),       // to have jQuery automatically convert
    max = $field.data("max");       // it to a number use .data()

使用子串函数和jQuery？

2 个答案: