JQuery 结合 .append 和 .attr答案

【问题标题】：JQuery combine .append and .attrJQuery 结合 .append 和 .attr
【发布时间】：2019-02-27 04:14:05
【问题描述】：

我想合并 .append 和 .attr。我应该怎么做？

$('.ngg-gallery-thumbnail').append("<a href='add/"+attr("data-title")+"/' class='btn btn-default'>Add</a>");

我想在 .ngg-gallery-thumbnail 中制作这样的东西：

<a href='add/brown-shoose/' class='btn btn-default'>Add</a>

完整的 .ngg-gallery-thumbnail 标签看起来像：

<div class="ngg-gallery-thumbnail">
  <a href="/wp-content/gallery/lietuviskos-kepures/LT-3002VV-6-mm-800-gm2-100-wool.jpg"
    title=""
    data-src="/wp-content/gallery/lietuviskos-kepures/LT-3002VV-6-mm-800-gm2-100-wool.jpg"
    data-thumbnail="/wp-content/gallery/lietuviskos-kepures/thumbs/thumbs_LT-3002VV-6-mm-800-gm2-100-wool.jpg"
    data-image-id="474"
    data-title="LT 3002VV 6 mm, 800 gm2 100 % wool"
    data-description=""
    data-image-slug="lt-3002vv-6-mm-800-gm2-100-wool"
    class="ngg-fancybox"
    rel="928d7ca69950d6ca6a0cf7cad40d2edf">
      <img title="LT 3002VV 6 mm, 800 gm2 100 % wool"
           alt="LT 3002VV 6 mm, 800 gm2 100 % wool"
           src="/wp-content/gallery/lietuviskos-kepures/thumbs/thumbs_LT-3002VV-6-mm-800-gm2-100-wool.jpg"
           style="max-width:100%;"
           width="240"
           height="160" />
  </a>
  <div style="max-width: 240px;">LT 3002VV 6 mm, 800 gm2 100 % wool</div>
</div>

【问题讨论】：

这是在加载文档时发生的吗？响应用户事件？ data-title 属性从何而来？您是在迭代现有元素还是以编程方式从其他地方添加元素？

标签： jquery append attr

【解决方案1】：

您应该使用appendTo() 函数来完成这项工作。

请查看以下示例：

$(document).ready(function(){
	$("<a href='add/brown-shoose' class='btn btn-default'>Add</a>").appendTo($('.ngg-gallery-thumbnail'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="ngg-gallery-thumbnail">
	<a href="/wp-content/gallery/lietuviskos-kepures/LT-3002VV-6-mm-800-gm2-100-wool.jpg" title="" data-src="/wp-content/gallery/lietuviskos-kepures/LT-3002VV-6-mm-800-gm2-100-wool.jpg" data-thumbnail="/wp-content/gallery/lietuviskos-kepures/thumbs/thumbs_LT-3002VV-6-mm-800-gm2-100-wool.jpg" data-image-id="474" data-title="LT 3002VV                6 mm, 800 gm2 100 % wool" data-description="" data-image-slug="lt-3002vv-6-mm-800-gm2-100-wool" class="ngg-fancybox" rel="928d7ca69950d6ca6a0cf7cad40d2edf">
		<img title="LT 3002VV 6 mm, 800 gm2 100 % wool" alt="LT 3002VV                6 mm, 800 gm2 100 % wool" src="/wp-content/gallery/lietuviskos-kepures/thumbs/thumbs_LT-3002VV-6-mm-800-gm2-100-wool.jpg" style="max-width:100%;" width="240" height="160">
	</a>
	<div style="max-width: 240px;">LT 3002VV 6 mm, 800 gm2 100 % wool</div>
</div>

【讨论】：