使用find从多个选择器开始忽略大小写

Question

我正在使用JQuery 1.10.2，我试图找到所有的链接，从多个选择器开始，我确信它可以被优化，但是我不知道怎么做。

选择器必须返回以以下urls开头的所有链接：

/GalleryDetail.aspx
/gallerydetail.aspx
GalleryDetail.aspx 
gallerydetail.aspx 
/sketchbook.aspx
/SketchBook.aspx
SketchBook.aspx
sketchbook.aspx

在这个时候，我用这个：

valNow.find("a[href^='/GalleryDetail.aspx'], a[href^='/gallerydetail.aspx'], a[href^='GalleryDetail.aspx'], a[href^='gallerydetail.aspx'],
a[href^='/sketchbook.aspx'], a[href^='/SketchBook.aspx'],
a[href^='sketchbook.aspx'], a[href^='SketchBook.aspx']");

我搜索，我读到我可以使用过滤器，但由于这是多个选择器，我甚至不知道从哪里开始。而且我想我可以用这个来做不光彩的事。

valNow.find("a[href^='/[gG]allery[dD]etail.aspx']")

但不知何故它没有返回链接。

任何帮助都将不胜感激。

Answer 1

使用Array.prototype.filter (和Array.prototype.some)可能的解决方案

​

$("a").filter((_, el) => {
        var startsWith = ["/gall", "sketch"],  // values to look for
            href = (el.getAttribute("href") || "").toLowerCase();  // the href value as defined in the markup
  
        return startsWith.some((val) => href.indexOf(val) == 0);   // returns true if the current elements (<el>) href attribute starts with (== 0) any of the values in <startsWith>
//      return startsWith.some((val) => href.indexOf(val) == 0 || href.indexOf("/" + val) == 0)
      })
      .addClass("foo");

.foo { background-color: yellow }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="/GalleryDetail.aspx">/GalleryDetail.aspx</a>
<a href="/gallerydetail.aspx">/gallerydetail.aspx</a>
<a href="GalleryDetail.aspx">GalleryDetail.aspx</a>
<a href="gallerydetail.aspx">gallerydetail.aspx</a>
<a href="/SketchBook.aspx">/SketchBook.aspx</a>
<a href="/sketchbook.aspx">/sketchbook.aspx</a>
<a href="SketchBook.aspx">SketchBook.aspx</a>
<a href="sketchbook.aspx">sketchbook.aspx</a>

​