显示 JQuery 对象的输出

Posted 2023-05-09

【中文标题】显示 JQuery 对象的输出

【英文标题】：Displaying the output of JQuery objects

【发布时间】：2018-12-31 11:15:32

【问题描述】：

我似乎无法将一些对象提取到表中并输出结果。我想捕获一些 jQuery 对象的结果。

我需要获取 Title、Description 和 Link 对象的结果，并将它们扔到 for 循环中，并使用表结构显示它们。我好像完全看不懂。

我已成功从 Title、Description 和 Link 中提取数据，所以现在我只需要弄清楚如何使用 html 显示它。

我们将不胜感激。

这是我的目标输出：

这是我的 roadmap.js 文件中的代码：

$(document).ready(function()
    $pnp.setup(
        baseUrl: "https://fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training"
    );

    $pnp.sp.web.lists.getByTitle("O365RoadMap").items.get().then(function(z)
        console.log(z);
        var result = z.results.map(a => (
            Title: `$a.Title`,
            Description: `$a.Description`,
            Link: `$a.Link`
            )
        );
        console.log(result);
        roadMapDisplay(result);
    )

    function roadMapDisplay(result) 
        var head = result.Title;
        var desc = result.Description; 
        var link = result.Link;

        var table = $('<table/>');
            for(var i = 0; i < 2; i++) 
                table.append('<tr/>').append('<td>' + head + '</td>');
                table.append('<tr/>').append('<td>' + desc + '</td>');
                table.append('<tr/>').append('<td>' + link + '</td>');
        
        $('.Title').append(table);
     
);

这是我在 roadmap.txt 中调用 html 的方式

<div class="Title"></div>

<script src="/TrainingResourceCenter/O365Training/SiteAssets/roadmap.js?v=1"></script>

【问题讨论】：

jQuery 的 .append() 应该被赋予完整的节点，而不是 HTML 字符串片段。例如，追加 <tr> 元素，然后追加 <td> 元素。

此外，您通常不需要在 <h1> 和 <p> 等块之后使用 <br> 元素。我建议使用 CSS 来控制它们的垂直边距

这样的？ table.append('').append('' + head + '');? 是的，这是在正确的轨道上，但您需要保留对 <tr> 变量的引用，以便添加其他 <td> 元素。此外，它将是 .append('<tr/>') 或 .append('<tr></tr>') 我继续对原始代码进行了一些更新，我删除了所有

【参考方案1】：

用这个替换你的roadMapDisplay函数：

function roadMapDisplay(result) 
    $('.Title').append('<table>' + 
        result.reduce(
            (a, e) => a + 
                `<tr><td><h1>$e.Title</h1></td>
                <td>$e.Description</td>
                <td>$e.Link</td></tr>`, 
            ''
        ) + '</table>'
    )

【讨论】：

非常感谢 Kosh 的更新！我继续用你的替换了 roadmapDisplay 函数，但我仍然没有得到要显示的对象。上面的代码位于名为 roadmap.js 的文件中，而我正在使用以下代码调用 html 文件中的 div：

【参考方案2】：

我又近了一步，我能够使用下面提供的代码获得输出：

有谁知道为什么我可能会得到未定义的回复？我没有收到任何 console.log 错误。

$(document).ready(function()
    $pnp.setup(
        baseUrl: "https://fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training"
    );

    $pnp.sp.web.lists.getByTitle("O365RoadMap").items.get().then(function(items) 
        console.log(items);
        var result = items.map(item => 
            return 
                Title: item.Title,
                Description: item.Description,
                Link: item.Link
            
        );
        var $table = roadMapDisplay(result);
        console.log($table);
        document.getElementById('title').innerHTML = $table.innerHTML;
    );

    function roadMapDisplay(items) 

        var table = $('<table/>');

        items.forEach(item => 
            table.append('<tr/>');
            table.append(`<td>$item.Title</td>`);
            table.append(`<td>$item.Description</td>`);
            table.append(`<td>$item.Link</td>`);
        );

        return table;
        
     
);

<div id="title"></div>

<script src="/TrainingResourceCenter/O365Training/SiteAssets/roadmap.js?v=1"></script>