Question 36217 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

change attr element by javascript – Jquery

This is my HTML Code:

<div class="desc">
<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 class="desc">
<p>Lorem ipsum dolor sit amet,....</p>
<img class="thumb lazyload" src="img/ui/logo/lazy.jpg" data-src="http://sample.com/dl/image-1.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img class="thumb lazyload" src="img/ui/logo/lazy.jpg" data-src="http://sample.com/dl/image-2.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img class="thumb lazyload" src="img/ui/logo/lazy.jpg" data-src="http://sample.com/dl/image-3.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img class="thumb lazyload" src="img/ui/logo/lazy.jpg" data-src="http://sample.com/dl/image-4.jpg">
</div>
Tags:

3

Answers


  1. 0 
    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

    Login or Signup to reply.
  2. 0

    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 class="desc">
  <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/

    Login or Signup to reply.
  3. 0

    $('.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 class="desc">
  <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search