Changing attribute value in its every appearance in jQuery,

Question

I try to change a value of an attribute "data-published" of every <a> element to one changed by romString function that is changing format of date. What am I doing wrong?

<script>


      $(function(){       

        var id='139540263@N06';
        var tag = document.getElementById('html').getAttribute("data-tag");


        // Flickr Photostream feed link.
        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=" + id + "&tags="+ tag + "&lang=en-us&format=json&jsoncallback=?", 

            function(data){$.each(data.items, 

                function(i,item){


                    // Number of images to show.            
                    if(i < 4){

                    var newTaken=new Date(item.date_taken.replace("T"," ").replace("Z","").replace("-08:00","")).getTime();
                    alert(newTaken);
                    // Create images and append to div id flickr and wrap link around the image.
                    $("<img/>").attr("src", item.media.m.replace('_z', '_c')).appendTo("[data-tag=html]").wrap("<a href='" + item.media.m.replace('_z', '_c') + "' name='"+ item.link + "' title='" +  item.title + "'data-taken='" + newTaken + "'data-published='" + item.published.replace("T"," ").replace("Z","") + "'></a>");



                    }

                }); 

            }); 

        });



    </script>

Now it alerts that newTaken is NaN. Do you know why?

Try removing quotes around `'value'` at `value=romString('value');` — guest271314, Jan 21 '16 at 15:34
Can include `html` , example of `$(this).attr('data-published')` string at Question ? Also , try moving `.getTime()` to after closing parenthesis of `new Date()` ; instead of chained to last value returned by `.match()` — guest271314, Jan 21 '16 at 15:47
See post below, compare differences between `a` element `html` at stacksnipetts, `a` element `html` at http://stackoverflow.com/questions/34927819/changing-attribute-value-in-its-every-appearance-in-jquery/34928353#comment57589664_34927819 — guest271314, Jan 21 '16 at 16:02

mplungjan · Answer 1 · 2016-01-21T17:04:58.160

0

Why not just do

$('.gallery>a').each(function() {
  var dt = $(this).data('published');
  $(this).data('published',new Date(dt).getTime());
});

assuming a format of

$(function() {
  $(".dd").each(function() {
    var dt = $(this).data("published");
    $(this).data("published",new Date(dt).getTime());
    $(this).text($(this).data("published"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dd" data-published="2015-01-21 16:43:00"></div>
<div class="dd" data-published="2016-01-21 16:43:00"></div>

edited Jan 21 '16 at 17:04

answered Jan 21 '16 at 15:42

mplungjan

169,008
28
173
236

Format of data-published="2015-01-21 16:43:00" is like this. But it still doesn't work... So frustrating... – Dominik Głowicki Jan 21 '16 at 15:55
Perhaps you need to do the date stuff where you concatenate item.published – mplungjan Jan 21 '16 at 16:19
Change `item.published.replace("T"," ").replace("Z","")` to `new Date(item.published.replace("T"," ").replace("Z","")).getDate()` – mplungjan Jan 21 '16 at 16:32
Please do a console.log(item.published.replace("T"," ").replace("Z","")) and tell me the result – mplungjan Jan 21 '16 at 16:41
2016-01-20 11:15:49 -console result. It seems right, but whe i give it Date()...getDate() it shows that data-published=NaN. – Dominik Głowicki Jan 21 '16 at 16:52
See my snippet update. There is something weird going on – mplungjan Jan 21 '16 at 17:05
BTW if you are converting to do a sort, there is no need at all. `2016-01-20 11:15:49` will sort just fine – mplungjan Jan 21 '16 at 17:08
So I want to sort them. How I suppose to do that? – Dominik Głowicki Jan 21 '16 at 20:39
In Chrome it works perfectly but in firefox it says that data-taken is NaN. I guess it is kind of cross-browser problem? What do you think? – Dominik Głowicki Jan 21 '16 at 20:43
Leave the date string as it is an sort on string. No need to convert to milliseconds – mplungjan Jan 21 '16 at 20:57
Maybe don't replace z and t http://stackoverflow.com/questions/4321270/regarding-javascript-new-date-and-date-parse – mplungjan Jan 21 '16 at 21:16

score 0 · Answer 2 · answered Jan 21 '16 at 15:56

html appear malformed at

<a data-published="2016-01-20 11:15:49" data-taken="2010-01-20 03:15:49" title="3" name="flickr.com/photos/139540263@N06/24130487059/"; href="farm2.staticflickr.com/1665/…; <img src="farm2.staticflickr.com/1665/…; </a>

should not include ; at close of attribute value assignments ; missing closing " at attribute values.

Moved .getTime() to after close of new Date() ; instead of at last index of matched results of parts

function romString(dateAsString){
    var parts = dateAsString.match(/(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/);
    return new Date(parts[1],
                parts[2] - 1,
                parts[3],
                parts[4],
                parts[5],
                parts[6]).getTime();
}
$('.gallery a').each(function() {
    var value = $(this).attr('data-published');
    var new_value=romString(value);
    $(this).attr('data-published', new_value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="gallery">
<a data-published="2016-01-20 11:15:49" data-taken="2010-01-20 03:15:49" title="3" name="flickr.com/photos/139540263@N06/24130487059/" href="farm2.staticflickr.com/1665/…"> <img src="farm2.staticflickr.com/1665/…" /> </a>
  </div>

function romString(dateAsString){
    var parts = dateAsString.match(/(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/);
    return new Date(parts[1],
                parts[2] - 1,
                parts[3],
                parts[4],
                parts[5],
                parts[6]).getTime();
}
$('.gallery a').each(function() {
    var value = $(this).attr('data-published');
    var new_value=romString(value);
    $(this).attr('data-published', new_value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="gallery">
<a data-published="2016-01-20 11:15:49" data-taken="2010-01-20 03:15:49" title="3" name="flickr.com/photos/139540263@N06/24130487059/" href="farm2.staticflickr.com/1665/…"> <img src="farm2.staticflickr.com/1665/…" /> </a>
  </div>

I don't have ; there i don't know how they get there. – Dominik Głowicki Jan 21 '16 at 16:07 — Dominik Głowicki, Jan 21 '16 at 16:07
@DominikGłowicki Tried `js` at stacksnippets ? – guest271314 Jan 21 '16 at 16:32 — guest271314, Jan 21 '16 at 16:32

Changing attribute value in its every appearance in jQuery,

2 Answers2