如何使用jquery / javascript通配符查找圖像

Question

這是場景。 我正在使用clolorbox。 目前，我可以找到父容器ID中的所有鏈接來使用燈箱。 如果所有這些鏈接都是圖像，那就很好。 但是，我希望能夠將a鏈接限制為僅包含圖像的鏈接。 父級中將混合使用圖像鏈接以及pdf和autocad文件。 理想情況下，我需要一種通配.jpg和png的方法來替換我的find（a）。 目前，我的代碼是這樣的：

$(document).ready(function(e) {
    $('#documents-items').find('a').colorbox();
});

因為文檔管理器是DNN的模塊，所以我無法用類或類似方式格式化任何特定的表。 我可以獲取父ID，但希望對圖像鏈接進行通配以使其正常工作。

謝謝

Answer 1

怎么樣

$('#documents-items a[href$=".jpg"]').add('#documents-items a[href$=".png"]')

Answer 2

假設您的HTML看起來像這樣（DOM ID通常不包含破折號，所以我用下划線代替了）：

<div id="document_items">
    <a href="index.html">HTML Link</a>
    <a href="document.pdf">PDF Link</a>
    <a href="image.png">Image Link</a>
    <a href="image.jpg">JPEG Link</a>
</div>

您可以遍歷#document_items選擇器中的所有鏈接，並對每個產生的href屬性運行正則表達式匹配。

如果它與鏈接中所需的文件擴展名匹配，則可以為其附加顏色框，否則將其忽略。

因此，您的JavaScript將如下所示：

$(document).ready(function() {
    $("#document_items a").each(function() {
        var currentHref = $(this).attr("href");
        if (currentHref.match(/jpg$|png$/)) {
            $(this).colorbox();
        }
    });
});

關於正則表達式中發生的情況的快速說明：

/.../ =開始和結束表達式

$ =字符串結尾

| =或

因此，這會將href的結尾與jpg或png匹配