使用 jquery 将文件中的特定行附加到列表元素答案

【问题标题】：append a specific line from a file to a list element with jquery使用 jquery 将文件中的特定行附加到列表元素
【发布时间】：2011-04-07 06:44:56
【问题描述】：

我从数据库中检索一些值并将它们保存在文件中。我在每个 li 元素中都有一个带有 id 的列表。

当我点击一个元素时，我想从文件中追加与我刚刚点击的 id 相同的行。

我有一个例子：

 <li id="test1">just test </li>

文件的一行中有一个test1 值。当我点击它时，我想附加它的值。

$(document).ready(function() {


            $.get("serverResource", function(data){
                        $('#test1').click(function()    {
                                   $('#test1').append(data);
                    });

问题在于data 包含整个文件数据，而不仅仅是一行。如何从文件中获取一行，然后使用 id 检查值，如果它是真的追加它？

【问题讨论】：

您有文件中的行的示例吗？而返回的数据是什么样的？
文件中的数据只是文本和 line1：test1，line2:test2 等...所以当我点击 test li 元素时，我想在“just test”文本旁边附加一个“test1”文本。当我点击一个 li 元素时我这样做的方式我将文件的所有数据附加到“只是测试”文本旁边......我需要 smthing 从文件中获取每一行并将其与 id 进行比较所以当它true 只打印行...

标签： php jquery append

【解决方案1】：

如果您的测试数据如下所示：

test1
test2
test3
test4

而 line X 对应于 li X，那么您可以通过拆分行然后插入数据来读取您通过 AJAX 在 javascript 数组中加载的文件的内容，如下所示：

    <html>
        <head>
            ...
            <script type="text/javascript">
                $(document).ready(function() {                                 
                    $.get('my_data.txt', function(data) {
                        var lines = data.split("\n");

                        $('#root li').click(function() {
                            var li = $(this);
                            // find position of the li in the containing ul
                            // and append the line to the li
                            var index = $('#root li').index(li);
                            li.append(lines[index]);
                        });
                    });                        
                });
            </script>
        </head>
        <body>
            <ul id="root">
                <li id="test1">Content 1</li>
                <li id="test2">Content 2</li>
                <li id="test3">Content 3</li>
                <li id="test4">Content 4</li>
            </ul>
        </body>
    </html>

仅当您的数据文件不包含数百个大而长的行时，这才是一个好方法。在 javascript 数组中读取这么多数据会消耗大量内存。

如果你有很多数据，你应该使用服务器端逻辑从文件中提取行：

            <script type="text/javascript">
                $(document).ready(function() {                                 
                    $('#root li').click(function() {
                        var li = $(this);
                        var index = $('#root li').index(li);

                        // use this ajax request to let PHP fetch the content of that line
                        $.get('fetchline.php', 'index=' + index, function(line) {
                            li.append(line);                    
                        });
                    });                    
                });
            </script>

而 fetchline.php 可能看起来像这样（简化）：

<?php 
// get the index provided as GET var
$index = intval($_GET['index']);
// read all lines from the data file in an array, not super optimisied, 
// but should do for not too large files
$lines = file('my_data.txt');
// print the line with index = $index
print $lines[$index];

【讨论】：