从没有路径的href附加文件名答案

【问题标题】：Append filename from href without path从没有路径的href附加文件名
【发布时间】：2015-03-09 07:02:48
【问题描述】：

感谢所有回复。有多个正确答案，我正在使用 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' 链接。但是，我只想包含文件名而不包含其路径。

目前它输出（例如）

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

我已经进行了大量的搜索和玩耍。我打了几个类似的线程，但我还没有设法（我不够好）弄明白。

谢谢！

乙。

【问题讨论】：

你能发布你的 HTML 吗？
按要求添加了 html
已添加我的答案 :-)

标签： jquery split append

【解决方案1】：

您可以使用split() 和pop，如下所示

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

演示：Fiddle

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

【讨论】：

这似乎是最干净的方法，我感谢您考虑不必要的 .parent() - 您对这个 Arun 竖起大拇指。感谢所有回答的人。

【解决方案2】：

使用拆分。

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

【讨论】：

最佳着装第一名.. 这完全符合预期，感谢一百万！

【解决方案3】：

试试下面：-

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

}); });

【讨论】：

不完全确定为什么，但我无法让它工作。无论如何，谢谢，我已经得到了正确的答案。

【解决方案4】：

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

    });
});

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

使用prop()Demo Here

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

【讨论】：