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

【问题标题】：jQuery - func append , the first one has appear twicejQuery - func append ，第一个出现了两次
【发布时间】：2015-06-21 11:09:51
【问题描述】：

我想在标签'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);
    });

但是效果是这样的。

谢谢！

【问题讨论】：

标签： jquery append

【解决方案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。）

【讨论】：