change attr element by javascript-CodePudding

This is my Html Code:

<div >
<p>Lorem ipsum dolor sit amet,....</p>
<img src="http://sample.com/dl/image-1.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img src="http://sample.com/dl/image-2.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img src="http://sample.com/dl/image-3.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img src="http://sample.com/dl/image-4.jpg">
</div>

This is my Javascript code:

$(document).ready(function() {
    $('.desc img').addClass('thumb lazyload').attr('data-src', $('.desc img').attr('src') ).attr('src','img/ui/logo/lazy.jpg');
});

I want the code to be as below, but the Javascript code does not work:

<div >
<p>Lorem ipsum dolor sit amet,....</p>
<img  src="img/ui/logo/lazy.jpg" data-src="http://sample.com/dl/image-1.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img  src="img/ui/logo/lazy.jpg" data-src="http://sample.com/dl/image-2.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img  src="img/ui/logo/lazy.jpg" data-src="http://sample.com/dl/image-3.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img  src="img/ui/logo/lazy.jpg" data-src="http://sample.com/dl/image-4.jpg">
</div>

$(document).ready(function() {
  $('.desc img').addClass('thumb lazyload').attr('data-src', $('.desc img').attr('src')).attr('src', 'img/ui/logo/lazy.jpg');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <p>Lorem ipsum dolor sit amet,....</p>
  <img src="http://sample.com/dl/image-1.jpg">
  <p>Lorem ipsum dolor sit amet,....</p>
  <img src="http://sample.com/dl/image-2.jpg">
  <p>Lorem ipsum dolor sit amet,....</p>
  <img src="http://sample.com/dl/image-3.jpg">
  <p>Lorem ipsum dolor sit amet,....</p>
  <img src="http://sample.com/dl/image-4.jpg">
</div>

CodePudding user response：

Consider the following.

$(document).ready(function() {
  $('.desc img').each(function(i, el) {
    $(el).addClass('thumb lazyload').attr({
      'data-src': $(el).attr('src'),
      'src': 'img/ui/logo/lazy.jpg'
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <p>Lorem ipsum dolor sit amet,....</p>
  <img src="http://sample.com/dl/image-1.jpg">
  <p>Lorem ipsum dolor sit amet,....</p>
  <img src="http://sample.com/dl/image-2.jpg">
  <p>Lorem ipsum dolor sit amet,....</p>
  <img src="http://sample.com/dl/image-3.jpg">
  <p>Lorem ipsum dolor sit amet,....</p>
  <img src="http://sample.com/dl/image-4.jpg">
</div>

This code itereates over each of the selected items and makes the change for each element. Your code is ambiguous and you may not get the results you expected.

See more: https://api.jquery.com/each/

CodePudding user response：

document.querySelector('[src="img/ui/logo/lazy.jpg"]').classList.add([mention classname you want to add]);

This is how you can add or remove classname or can change attr

CodePudding user response：

$('.desc img').attr('src') returns the attribute of the first element matching the selector, not the element whose data-src attribute is being set.

You can give a function as the second argument to .attr(). The function will be called with this equal to the current element, and its return value will be used for that element.

$(document).ready(function() {
  $('.desc img').addClass('thumb lazyload').attr('data-src', function() {
    return this.src;
  }).attr('src', 'img/ui/logo/lazy.jpg');
});

<div >
  <p>Lorem ipsum dolor sit amet,....</p>
  <img src="http://sample.com/dl/image-1.jpg">
  <p>Lorem ipsum dolor sit amet,....</p>
  <img src="http://sample.com/dl/image-2.jpg">
  <p>Lorem ipsum dolor sit amet,....</p>
  <img src="http://sample.com/dl/image-3.jpg">
  <p>Lorem ipsum dolor sit amet,....</p>
  <img src="http://sample.com/dl/image-4.jpg">
</div>