javascript - 检查文件扩展名的一部分并使用 jquery 添加类

Question

我正在尝试从文件名中检查以下内容:

图像/产品/图标/

来自包含以下内容的页面:div.lookup-image-wrapper

如果我匹配它们，那么我想向包含以下内容的图像添加一个类:

图像/产品/图标/

HTML:

<div class="lookup-image-wrapper" style="text-align: center">

    <div id="divProductPicZ23280" style="display:none"></div>

    <div class="divProductPic" id="divProductPic23280">
        <img alt="Camping" border="0" id="ProductPic23280" name="ProductPic23280" src="images/Product/medium/23280.jpg">
    </div>

        <img alt="Show Picture 1" border="0" onclick="setcolorpicidx_23280(1);" src="http://i47.tinypic.com/o7szev.jpg" style="cursor:hand;cursor:pointer;">

        <img alt="Show Picture 2" border="0" onclick="setcolorpicidx_23280(2);" src="http://i47.tinypic.com/o7szev.jpg" style="cursor:hand;cursor:pointer;">

        <img alt="Show Picture 3" border="0" onclick="setcolorpicidx_23280(3);" src="http://i47.tinypic.com/o7szev.jpg" style="cursor:hand;cursor:pointer;">

        <img alt="Show Picture 4" border="0" onclick="setcolorpicidx_23280(4);" src="skins/skin_1/images/nopictureicon.gif" style="cursor:hand;cursor:pointer;">

        <img alt="Show Picture 5" border="0" onclick="setcolorpicidx_23280(5);" src="images/PRODUCT/icon/23280_5_.jpg" style="cursor:hand;cursor:pointer;">

jquery:

$("img[src='images/PRODUCT/icon/']").addClass("selected highlight");

http://jsfiddle.net/tVvKL/

Answer 1

作为一个有趣的替代方案，您可以在 CSS 中执行此操作，因为您所做的只是添加一个类 - http://jsfiddle.net/spacebeers/tVvKL/1/

例如:

    img[src*='images/PRODUCT/icon/'] { 
        border: 2px solid red;
    } ​

    img[src^='images/PRODUCT/icon/'] { 
        border: 2px solid red;
    } ​

IE7+、Firefox 3.0+、Safari 1.3+、Chrome 2+ 和 Opera 9.2+ 支持属性选择器

http://www.impressivewebs.com/attribute-selectors/