1

我正在努力解决这个问题 - 我是 Jquery 的新手。我试图给每个元素一个基于其父类的图标 - 用于投资组合过滤器（即网络项目有网络图标，图形项目有图形图标，等等）。

这是我到目前为止所做的（简化）：

<!-- Project Thumbnails -->

<ul id="thumbs">
    <li class="web">
        <a name="div1"><span aria-hidden="true" data-icon=""></span><img src="img/project1.png" /></a>
    </li>
    <li class="graphics">
        <a name="div2"><span aria-hidden="true" data-icon=""></span><img src="img/project2.png" /></a>
    </li>
    <li class="photography">
        <a name="div3"><span aria-hidden="true" data-icon=""></span><img src="img/project3.png" /></a>
    </li>
</ul>

这是Jquery：

// Determine span class by parent class
$("#thumbs li a").each(function(){
    $this = $(this);
    $thisparent = $(this).parent();
    $span = $(this).children('span');

    $span.addClass($thisparent.attr('class'));  
});

所以，我可以给每个跨度一个类，从它的父级继承——允许我对每个项目类别进行不同的样式设置。但是如何设置数据图标值？

我正在使用Icomoon嵌入我的图标，所以显然数据图标值将类似于&#x0037;- 因此每个过滤器类别（网络、摄影、图形）都必须以某种方式链接到特定的数据图标值。

有任何想法吗？

4

3 回答 3

1

试试这个

$("#thumbs li a span").each(function(){
    var cls=$(this).closest('li').attr('class');
    $(this).attr({'class':cls, 'data-icon':cls });
});

演示。通过浏览器的检查器工具查看源代码。

结果：

<span aria-hidden="true" data-icon="web" class="web"></span>
<span aria-hidden="true" data-icon="graphics" class="graphics"></span>
<span aria-hidden="true" data-icon="photography" class="photography"></span>

更新：您也可以将图标的名称保存在预定义的对象中，然后使用它，即

var icons={'web':'globe', 'graphics':'picture','photography':'photo'};
$("#thumbs li a span").each(function(){
    var cls=$(this).closest('li').attr('class');
    $(this).attr({'class':cls, 'data-icon':icons[cls] });
});

DEMO .通过浏览器的inspector工具查看源码。

结果：

<span aria-hidden="true" data-icon="globe" class="web"></span>
<span aria-hidden="true" data-icon="picture" class="graphics"></span>
<span aria-hidden="true" data-icon="photo" class="photography"></span>
于 2012-10-01T18:56:01.483 回答
0

试试这个

$("#thumbs li a").each(function(){
    var $this = $(this);
    var $thisparent = $(this).parent();
    var $span = $thisparent.find('span');

    $span.addClass($thisparent.attr('class'));  
    $span.data('icon',$thisparent.attr('class')); 
});
于 2012-10-01T18:42:45.283 回答
0

这应该适合你

// Determine span class by parent class
$("#thumbs li a").each(function(){
    $this = $(this);
    $thisparent = $(this).parent();
    $span = $(this).children('span');

    $span.addClass($thisparent.attr('class')); 
    $span.data('icon',$thisparent.attr('class')); 
});
于 2012-10-01T18:43:08.900 回答