CODEWITHSUNDEEP
jquerysplitappend
Bevels
Bevels

Reputation: 65

Append filename from href without path

Thanks for all the replies. There are multiple correct answers, I'm running with Arun's answer because it appears the cleanest solution. Cheers all.

The following works as intended...

jQuery(document).ready(function(jQuery) {

    jQuery(".jg-entry").each(function() {

    jQuery(this).append(jQuery('<h6/>', {text: jQuery(this).parent().find('a').prop('href')}));

    });
});

...it appends each 'a' link between h6 tags in a specified div. However, I'd like to only include the filename without its path.

Currently it outputs (for example)

<h6>http://localhost/client/content/photos/image.jpg</h6>

but I'd like it to simply output the filename like so...

<h6>image.jpg</h6>

html looks like this:

<div class="jg-entry">
<a href="http://localhost/client/content/photos/photo1.jpg"><img src="http://localhost/client/content/photos/photo1-large.jpg"></a><h6>http://localhost/client/content/photos/photo1.jpg</h6>
</div>

I've done a ton of searching and playing around. I hit a few threads which were similar, but I haven't managed (I'm not good enough) to figure it out.

Thanks!

B.

Upvotes: 0

Views: 502

Answers (6)

I&#39;m Geeker
I&#39;m Geeker

Reputation: 4637

Use prop() Demo Here 

$(function ($) {
    $(".jg-entry").each(function () {
        $(this).append($('<h6/>', {
            text: $(this).find('a').prop('href').split('/').pop()
        }));
    });
});

Upvotes: 0

Jai
Jai

Reputation: 74738

use .split('/').pop():

.split('/') lets you create an array out of your string and .pop() will return you the last item resides in the created array which is the image name "photo1.jpg".

jQuery(".jg-entry").each(function() {
  jQuery(this).append(jQuery('<h6/>', {
    text: jQuery(this).parent().find('a').prop('href').split('/').pop()
  }));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jg-entry">
  <a href="http://localhost/client/content/photos/photo1.jpg">
    <img src="http://localhost/client/content/photos/photo1-large.jpg">
  </a>
</div>

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388406

You could use a split() and pop like below

jQuery(function ($) {
    $(".jg-entry").each(function () {
        $(this).append($('<h6/>', {
            text: $(this).find('a').attr('href').split('/').pop()
        }));
    });
});

Demo: Fiddle

Also no need to call .parent() as the anchor is a child of the .jg-entry entry.

Upvotes: 1

Mox Shah
Mox Shah

Reputation: 3015

jQuery(document).ready(function(jQuery) {

    jQuery(".jg-entry").each(function() {

    var link = jQuery(this).parent().find('a').prop('href');
    jQuery(this).append(jQuery('<h6/>', {text: link.substring(data.lastIndexOf('/')+1,data.length)}));

    });
});

Upvotes: 0

Amit Soni
Amit Soni

Reputation: 3316

Try below:-

 jQuery(document).ready(function(jQuery) {

   jQuery(".jg-entry").each(function() {

   var  yourstring = jQuery(this).parent().find('a').prop('href');
   var fileNameIndex = yourstring.lastIndexOf("/") + 1;
   var filename = yourstring.substr(fileNameIndex);

jQuery(this).append(jQuery('<h6/>', {text:filename  }));

}); });

Upvotes: 0

SansWord
SansWord

Reputation: 91

Using split.

jQuery(document).ready(function(jQuery) {
    jQuery(".jg-entry").each(function() {
        var paths = jQuery(this).parent().find('a').prop('href').split("/"),
            filename = paths[paths.length-1];       
        jQuery(this).append(jQuery('<h6/>', {text:filename}));
    });
});

Upvotes: 0

Related Questions