.text() 在 JSON 成功函数中返回重复数据

Question

情况：我已从 SmartRecruiters API 请求 JSON 数据并将其附加到我的布局中。由于职位描述很长，我想将p 中的字符数限制为 x# 个字符。经过研究，我与.text() 合作并得出以下结论：

var desc = $('.desc')
desc.text(desc.text().substring(0,250) + '...');
console.log("work");

代码成功限制了字符数，但为描述中的每个帖子返回了重复的 JSON 数据。

我的尝试：

1. 我认为这与包含在 showDetails 函数中的代码有关，因此我将其从函数中删除并放在“外部”。它不起作用。
2. 由于我将p 设置为.desc 类，我想我必须使用$.each。

我写道：

var desc = $('.desc')
desc.each(function() {
  $(this).text(desc.text().substring(0,250) + '...');
  console.log("work");
});

返回重复数据。

1. 我想可能是因为它是一个类所以我切换到#desc。更改为 jobDetail.setAttribute('class', 'desc') 并调用 $('#desc') 它的工作原理是随机限制几个 p 但不是全部。

问题：如何正确限制 p 的内容长度并在 JSON 函数中添加省略号？

完整代码：

$(document).ready(function() {

// Create variable to append postings to
var postingsContainer = document.querySelector('div.job-container');

// Creates postings JSON request
$.getJSON('https://api.smartrecruiters.com/v1/companies/SynchronyGroup/postings', function (postings) {

    // Check to see if data is being pulled
    //console.log(postings);

    showJobs(postings);


});

// Function that pulls json data and populates careers section
function showJobs(jsonObj) {

    // Variable that holds job postings json data
    var jobs = jsonObj['content']

    // Loop to create open position elements
    for (var i = 0; i < jobs.length; i++) {

        // Creates Column for job postings
        var jobPosting = document.createElement('div');
        jobPosting.setAttribute('class', 'col-12 col-md-6 col-lg-4 my-5 job-posting');

        // Creates Job Title
        var jobH5 = document.createElement('h5');
        jobH5.textContent = jobs[i].name;

        jobPosting.appendChild(jobH5);
        postingsContainer.appendChild(jobPosting);

        // Store job post IDs in var
        var jobId = jobs[i].ref;

        //
        //
        // IIFE
        (function (jobPosting) {
            // Creates post 2nd ID JSON request
            $.getJSON(jobId, function (data) {

                // Check to see if data is being pulled
                console.log(data);

                showDetails(data, jobPosting);
            })
        }(jobPosting));

    }
}

//Function for posting description and apply url
function showDetails(data, jobPosting) {

    // Creates Company Desc. and Apply Link
    var jobDetail = document.createElement('p');
    var jobApply = document.createElement('a');

    // Pulls job description data and strips HTML Markup
    jobDesc = data.jobAd.sections.jobDescription.text.replace(/<\/?[^>]+>/gi, '');

    jobDetail.setAttribute('class', 'desc')
    jobDetail.textContent = jobDesc;

    jobApply.setAttribute('href', data.applyUrl);
    jobApply.setAttribute('class', 'btn-primary');
    jobApply.setAttribute('target', '_blank');
    jobApply.textContent = 'Apply for Position'

    jobPosting.appendChild(jobDetail);
    jobPosting.appendChild(jobApply);

    var desc = $('.desc')
    desc.each(function() {
        $(this).text(desc.text().substring(0,250) + '...');
        console.log("work");
    });

}

});

Answer 1

不需要：

var desc = $('.desc')
desc.each(function() {
    $(this).text(desc.text().substring(0,250) + '...');
    console.log("work");
});

只要做：

jobDetail.textContent = jobDesc.substr(0, 250) + "..."