getElementsByName：按最后一个部分名称控制答案

【问题标题】：getElementsByName: control by last partial namegetElementsByName：按最后一个部分名称控制
【发布时间】：2015-09-30 09:30:36
【问题描述】：

我可以通过 id 获取 div 元素，并且只使用部分名称“first”

html

<div id="first.1.end">first.1.end</div>
<div id="first.2.end">first.2.end</div>
<div id="two.3.end">two.3.end</div>
<div id="first.4.end">first.4.end</div>

function getElementsByIdStartsWith(selectorTag, prefix) {
    var items = [];
    var myPosts = document.getElementsByTagName(selectorTag);
    for (var i = 0; i < myPosts.length; i++) {
        if (myPosts[i].id.lastIndexOf(prefix, 0) === 0) {
            items.push(myPosts[i]);
        }
    }
    return items;
}
var postedOnes = getElementsByIdStartsWith("div", "first");
alert(postedOnes.length);

它计算 3 个 div 元素（警告）。

但是如何使用结尾部分名称进行搜索？例如使用“结束”？

【问题讨论】：

所以你想按“end”而不是“first”搜索？
见下文，希望对您有所帮助...这是一个常见的功能，包括组合或所有三个参数..

标签： javascript jquery

【解决方案1】：

来自MDN Attribute selectors：

[attr^=value] 表示属性名为 attr 的元素，其值以“值”为前缀。

[attr$=value] 表示属性名为 attr 的元素，其值以“值”为后缀。

所以你可以使用[id^="first"] 来查找id 以"first" 开头的元素。并使用[id$="end"] 查找以"end" 结尾的元素。

喜欢

// This find all div which id ends with "end".
var divs = document.querySelectorAll('div[id$="end"]');

或使用 jQuery：

$('div[id$="end"]');

此外，您可以将多个属性选择器组合在一起以找到更具体的元素：

// As we only use querySelector, it find the first div with id starts with "two" and ends with "end".
var divStartAndEnd = document.querySelector('div[id^="two"][id$="end"]');

在jsfiddle上查看演示

【讨论】：

【解决方案2】：

在这里，我允许用户传递所有三个参数。假设用户没有通过 midmatch，所以它只会返回第一个和最后一个匹配。

下面是工作代码：

它将返回 1 个计数：

function getElementsByIdStartsWith(selectorTag, firstmatch, midmatch, lastmatch) {
    var items = [];
    var myPosts = document.getElementsByTagName(selectorTag);
    for (var i = 0; i < myPosts.length; i++) {
        var firstmatchIndex = firstmatch?myPosts[i].id.indexOf(firstmatch)>-1?true : false : true;
        var midmatchIndex = midmatch?myPosts[i].id.indexOf(midmatch)>-1?true : false : true;
        var lastmatchIndex = lastmatch?myPosts[i].id.indexOf(lastmatch)>-1?true : false : true;
        if (firstmatchIndex && midmatchIndex && lastmatchIndex  ) {
            items.push(myPosts[i]);
        }
    }
    return items;
}
var postedOnes = getElementsByIdStartsWith("div", "first", "2", "end");
alert(postedOnes.length); // now it will show only one in alert.

它将返回 3 个计数：

function getElementsByIdStartsWith(selectorTag, firstmatch, midmatch, lastmatch) {
    var items = [];
    var myPosts = document.getElementsByTagName(selectorTag);
    for (var i = 0; i < myPosts.length; i++) {
        var firstmatchIndex = firstmatch?myPosts[i].id.indexOf(firstmatch)>-1?true : false : true;
        var midmatchIndex = midmatch?myPosts[i].id.indexOf(midmatch)>-1?true : false : true;
        var lastmatchIndex = lastmatch?myPosts[i].id.indexOf(lastmatch)>-1?true : false : true;
        if (firstmatchIndex && midmatchIndex && lastmatchIndex  ) {
            items.push(myPosts[i]);
        }
    }
    return items;
}
var postedOnes = getElementsByIdStartsWith("div", "first", "", "end");
alert(postedOnes.length); // now it will show only three in alert.

如果您不想考虑任何参数，只需在调用函数时传递空字符串( "" )。

希望对你有帮助:)

【讨论】：

【解决方案3】：

我想这种选择可以通过使用 jQuery + regex 来实现。看看这个

How can I select an element by ID with jQuery using regex?

可能是一些你想要的东西。

【讨论】：