Question

我有一个ajax调用来调用一个处理程序，它正在为一个项目所在的类别创建一个链接。代码没有问题，但我需要在链接和我之间添加逗号和空格我不太清楚如何。

这是我正在使用的代码：

$('.Product').each(function () {

    var ProductRow = $(this);
    var ItemCode = $(this).find('.IDItemNumber').text()
    //GET UDF INFO
    $.ajax({
        url: ("/customer/somkaf/b2bse/handlers/GetItemCategories.ashx"),
        data: {
            "item_code": ItemCode
        },
        cache: false,
        type: "GET",
        async: true,
        success: function (response) {
            $(response).find("Category").each(function () {
                var categoryName = $(this).find("Name").text();
                var categoryLink = $(this).find("Link").text();

                $(ProductRow).find('.CategoryLinkContent').append('<a href="' + categoryLink + '">' + categoryName + '</a>');
            });
        }
    });
});

此代码显示如下：

查看此类别中的所有项目：关闭车轮组件和零件FORMOR MONOSEMFOR WHITEKINZE CLOSING WHEELS

我想要的是：

查看此类别中的所有项目：关闭车轮组件和零件，FOR MONOSEM，白色，KINZE CLOSING WHEELS

我尝试使用join()作为逗号，但是我收到一个控制台错误，它不是一个函数，所以也许我把它放在错误的区域？

$(ProductRow).find('.CategoryLinkContent').append('<a href="' + categoryLink + '">' + categoryName + '</a>').join(',');

Answer 1

您可以使用join但是您需要从链接中创建一个数组，而不是逐个添加它们。

var links = $(response).find("Category").map(function() {
  var categoryName = $(this).find("Name").text();
  var categoryLink = $(this).find("Link").text();

  return '<a href="' + categoryLink + '">' + categoryName + '</a>'
}).get();

$(ProductRow).find('.CategoryLinkContent').append( links.join(', ') );

或者如果您不介意逗号成为链接的一部分，您可以使用CSS

因此您按原样编码，并添加以下CSS规则

.Product .CategoryLinkContent a + a:before{content:', ';}

Answer 2

我建议只使用 CSS 的解决方案，因为它在编程部分很简单：

在 span 内创建每个 a 元素：

out += "<span class='link-container'>  <a href='#'> something </a>  </span>");

CSS：

.link-container:not(:last-child)::after {
   content: ', ';
}

这将在除最后一个元素之外的每个跨度元素后放置一个逗号。

Answer 3

您可以做的是，在.each内，您可以选择在第一次迭代时避免,，如下所示：

$(response).find("Category").each(function (k,v) {
    var categoryName = $(this).find("Name").text();
    var categoryLink = $(this).find("Link").text();
    if(k==0)
        $(ProductRow).find('.CategoryLinkContent').append('<a href="' + categoryLink + '">' + categoryName + '</a>');
    else
        $(ProductRow).find('.CategoryLinkContent').append(', <a href="' + categoryLink + '">' + categoryName + '</a>');
});

Answer 4

将成功改为此

<serviceCredentials>
    <userNameAuthentication userNamePasswordValidationMode="Custom" customUserNamePasswordValidatorType="xxx.MyUserNameValidator,xxx.WCF.Security"/>
</serviceCredentials>

在每个链接后添加逗号

4 个答案: