.text() returns JSON 成功函数中的重复数据

Question

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

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

该代码成功地限制了字符数，但是 returns 描述中每个 post 重复 JSON 数据。

我试过的：

我认为它与 showDetails 函数中包含的代码有关，所以我将其从函数中删除并放置在 "outside" 中。没用。
由于我将 p 设置为 class .desc，我认为我必须使用 $.each。

我写道：

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

返回重复数据。

我想可能是因为它是 class，所以我切换到 #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) + "..."

.text() returns JSON 成功函数中的重复数据

.text() returns duplicate data in JSON success function

api

each

jquery

json

for-loop