从没有路径的 href 追加文件名

Question

感谢大家的回复。有多个正确答案，我是运行 Arun 的答案，因为它看起来是最干净的解决方案。大家干杯

以下按预期工作...

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

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

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

    });
});

...它在指定的 div 中的 h6 标签之间附加每个 'a' link。但是，我只想包含没有路径的文件名。

目前输出（例如）

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

但我希望它像这样简单地输出文件名...

<h6>image.jpg</h6>

html 看起来像这样：

<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>

我进行了大量的搜索和尝试。我遇到了一些类似的线程，但我还没有设法（我不够好）弄清楚。

谢谢！

B.

Answer 1

使用拆分。

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}));
    });
});

Answer 2

尝试以下：-

 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  }));

}); });

Answer 3

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)}));

    });
});

Answer 4

使用.split('/').pop():

.split('/') 允许您从字符串中创建一个数组，.pop() 将 return 您的最后一项驻留在创建的数组中，即图像名称 "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>

Answer 5

您可以使用如下所示的 split() and pop

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

演示：Fiddle

也无需调用 .parent()，因为 anchor 是 .jg-entry 条目的子项。

Answer 6

使用prop() Demo Here

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

从没有路径的 href 追加文件名

Append filename from href without path

jquery

split

append