img src不为空时如何添加rel属性？答案

【问题标题】：How to add rel attribute when img src not empty?img src不为空时如何添加rel属性？
【发布时间】：2014-11-18 13:27:35
【问题描述】：

<div class="otherProducts">
  <a href="http://metroplastasansor.bilginet.com/wp-content/uploads/2014/11/hidrolik-tampon-metroplast-asansor-41943-390057037-b.jpg" class="otherLink"><img src="http://metroplastasansor.bilginet.com/wp-content/uploads/2014/11/hidrolik-tampon-metroplast-asansor-41943-390057037-b.jpg" class="productThumb"></a>
  <a href="" class="otherLink"><img src="" class="productThumb"></a>
  <a href=""><img src="" class="productThumb"></a></div>

如何使用 jquery 将 rel="prettyPhoto[gallery]" 添加到 a 中？只有非空src的链接！

【问题讨论】：

您的问题并不完全清楚。 “仅与非空 src 的链接！”是什么意思？什么意思？
我想你会发现 'rel' 需要应用于父 <a> 元素，而不是 <img> 本身。

标签： jquery add attr prettyphoto rel

【解决方案1】：

如果我理解正确，您正在寻找

$('a').filter(function() {
    return $(this).has('img[src!=""]');
})
.attr('rel', 'prettyPhoto[gallery]');

DEMO

【讨论】：

【解决方案2】：

您可以使用.filter()。

我选择了所有带有.otherProducts 的图片。然后我将一个函数传递给过滤器，如果 src 属性为真，则返回 true，如果它具有虚假（空白）值，则返回 false。

然后使用.attr() 将最接近<a>s 的rel 属性更改为其余选择：

$('.otherProducts img').filter(function(){
    return $(this).attr('src');
}).closest('a').attr('rel', 'prettyPhoto[gallery]');

JSFiddle

【讨论】：

谢谢乔治！我的问题已解决。我可能会使用此代码。 j('.otherProducts img').filter(function(){ return j(this).attr('src'); }).parent().attr('rel', 'prettyPhoto[gallery]');
是的，src属性是绝对路径，this.getAttribute(...)呢？
@Vohuman 我知道。为什么.getAttribute() 超过.attr()？这实际上是个人喜好问题，除非您担心（微小）速度差异。
@George .getAttribute() 不短于.attr()，这是肯定的。假设这是我对 img src 绝对路径的错误。

【解决方案3】：

我可以使用这个代码：

$('.otherProducts img').filter(function(){
return $(this).attr('src');}).parent().attr('rel', 'prettyPhoto[gallery]');

谢谢乔治！

【讨论】：

您可以向@George 提及添加.parent() 并接受他的回答，而不是将其作为答案发布。

【解决方案4】：

通过使用.each 和.parent() 喜欢：

 $('.productThumb').each(function() {
   if ($(this).attr("src") != "") {
     //if it has source
     $(this).parent().attr("rel", "prettyPhoto[gallery]");
   }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="otherProducts">
  <a href="http://metroplastasansor.bilginet.com/wp-content/uploads/2014/11/hidrolik-tampon-metroplast-asansor-41943-390057037s-b.jpg" class="otherLink">

    <img src="http://metroplastasansor.bilginet.com/wp-content/uploads/2014/11/hidrolik-tampon-metroplast-asansor-41943-390057037-b.jpg" class="productThumb">

  </a>
  <a href="" class="otherLink">
    <img src="" class="productThumb">
  </a>
  <a href="">
    <img src="" class="productThumb">
  </a>

</div>

http://jsfiddle.net/5gnettxg/

【讨论】：

【解决方案5】：

试试这段代码

if($("img.productThumb").attr("src")!=""){

  $(this).attr("rel","prettyPhoto[gallery]");

}

【讨论】：

好吧，如果你在<script></script>中使用这段代码，this指向window。