jQuery

Question

我想向标签 'li' 添加一些详细信息，所以我将详细信息存储到标签 'a'。

但效果不佳。索引“0”出现了两次。

相关代码。

<div class="frame">
        <ul>
            <li>
                <a class="thumb" href="#" />        
                <img title="EOC 450D Camera" src="image/picture1.jpg"/>
                <a class= "descript" href="test1" />

            </li>
            <li>
                <a class="thumb" href="#"/>
                    <img title="A Set of Camera Lenses" src="image/picture2.jpg"/>
                <a class = "descript" href="test2" />

            </li>
            <li>
                <a class="thumb" href="#"/>
                    <img title="Profession Camera" src="image/picture3.jpg"/>
                <a class= "descript" href="test3" />
            </li>
            <li>
                <a class="thumb" href="#">
                    <img title="EOC 2100D Camera" src="image/picture4.jpg"/>
                </a>
            </li>
        </ul>
    </div>

jQuery部分：

$items.each(function(){
        var $this = $(this), 
            _href = $this.find('a').attr('href'), 
            _title = $this.find('img').attr('title');
        var _text = $this.find('.descript').attr('href');

        $this.append('<div class="ovrly">' +
            '<h3>' + 
                '<a href="' + _href + '" alt="' + _title + '" title="' + _title + '">' + _title + '</a>'  + 
            '</h3>' + '<br>' + _text +
            '</div>').find('.ovrly').css('opacity', _opacity);
    });

但是效果是这样的。

谢谢！

Answer 1

我相信浏览器对您的自动关闭 <a ... /> 元素感到困惑。如果您将它们全部更改为具有单独的结束 </a> 标记，那么它似乎工作正常。

即变化：

<a class="thumb" href="#" />

至

<a class="thumb" href="#"></a>

等等。尽管可能每个 <img> 元素都应该在每个 <li> 的第一个锚点内，就像您对第四个元素所做的那样。

演示：http://jsfiddle.net/5jp0f3or/

(运行您在 Chrome 中的代码，我尝试了 console.log( $("a").length );，它显示 13！用 </a> 关闭所有锚点，然后再试一次记录了预期的 7。）

jQuery - func append ，第一个出现了两次

jQuery - func append , the first one has appear twice

append