在 PHP 中访问 HTML 无序列表元素答案

【问题标题】：Accessing HTML unordered list elements in PHP在 PHP 中访问 HTML 无序列表元素
【发布时间】：2013-05-04 12:28:42
【问题描述】：

我正在尝试访问 php 中的无序列表元素，以便将它们插入数据库中，我需要能够通过位置访问它们，但我不确定如何在 PHP 中执行此操作。我正在使用 jQuery，以便列表可以在客户端进行排序。在 Javascript 中，它可以通过

访问

alert($("#sortable li:first").text() + ' is first ' + $("#sortable   li:eq(1)").text()    + ' is second ' + $("#sortable li:eq(11)").text() + ' is last');

我正在使用的列表位于http://jsfiddle.net/mMTtc/

我只是在寻求有关如何将这些列表项存储在 php 变量中的帮助，即假设我想要基于用户如何订购列表的第 6 个元素。我该怎么做？

谢谢

【问题讨论】：

如果您要保存他们的排序方式，为什么不使用data-index 之类的东西呢？您可以在使用 jQuery 的 .data() 重新排序时更改值，存储它的整数值，然后当您从数据库中提取以在将来加载页面时创建列表时，您可以 ORDER BY 该项目，因此列表顺序保持不变.
我认为它们的排序方式无关紧要，因为它会在处理 PHP 之前改变 DOM，我不确定。我只是在寻找一种方法来逐个访问 PHP 中的无序列表，以便将每个元素存储在一个变量中。
@user1628206：如果其中一个答案帮助您解决了问题，请将其标记为“已接受”，以便以后遇到类似问题的用户能够轻松发现。

标签： php html list variables unordered

【解决方案1】：

使用以下代码，您可以在用户更改前端元素的顺序时向 PHP 后端发送更新：

$("#sortable").on("sortupdate", function() {
    var dataArr = [];
    $("#sortable li").each(function(idx, elem) {
        dataArr[idx] = $(elem).html();
    });
    var dataStr = '{"newOrder":' + JSON.stringify(dataArr) + '}';
    $.ajax({
        url: "<url_to_php_file>",
        data: dataStr
    });
    // alert(dataStr);
});

现场示例（前端部分）：here

您必须将 <url_to_php_file> 替换为您的 PHP 文件的路径，该文件执行元素顺序的处理（即将它们保存在数据库中）。该文件将能够以普通的 PHP Array 访问用户定义的顺序，使用 json_decode($_POST["newOrder"])，即

...
$newOrder = json_decode($_POST["newOrder"]);
for ($i = 0; $i < count($newOrder); $i++) {
    echo("The item labeled '" . $newOrder[$i] . "' is placed by the user at index " . $i . ".\n";
    /* 1st item: index 0 */
    /* 2st item: index 1 */
    /* ... */
}

示例：您向用户呈现一个可排序的列表，其中包含以下项目：item1、item2、item3（按此顺序）。
用户将 item2 放在 item1 之前，此时进行 AJAX 调用，将数组 ["item2", "item1", "item3"] 传递给服务器（注意顺序）。上面的 sn-p 会回显：

The item labeled 'item2' is placed by the user at index 0.
The item labeled 'item1' is placed by the user at index 1.
The item labeled 'item3' is placed by the user at index 2.

（当然，您可以为每个项目更新数据库中索引字段的值或做一些有用的事情，而不是回显任何内容。）

【讨论】：

如何访问通过 json 传递的数据项？假设在声明 $value = json_decode($_POST["newOrder"]); 后尝试回显数组中的第一项；
@user1628206 我用如何访问服务器端数据的示例更新了我的答案。另外请注意，我提出的解决方案只是技术的说明，您应该根据您的具体要求对其进行自定义。例如。您可能不想在每次重新排序后进行 AJAX 调用（稍后可能会撤消），而是让用户重新排序项目，然后单击触发 AJAX 调用等的“保存”按钮。

【解决方案2】：

您可以使用DomDocument 来解析您的HTML。这可以通过使用loadHTML() 的字符串或使用loadHTMLFile() 加载外部HTML 文件来完成。

本例使用loadHTML():

<?php

  $html = '<html>
    <body> 
    <ul id="sortable">
      <li class="ui-state-default">1</li>
      <li class="ui-state-default">2</li>
      <li class="ui-state-default">3</li>
      <li class="ui-state-default">4</li>
      <li class="ui-state-default">5</li>
      <li class="ui-state-default">6</li>
      <li class="ui-state-default">7</li>
      <li class="ui-state-default">8</li>
      <li class="ui-state-default">9</li>
      <li class="ui-state-default">10</li>
      <li class="ui-state-default">11</li>
      <li class="ui-state-default">12</li>
    </ul>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>    
    </body>
    </html>';

$dom = new DomDocument;
$dom->loadHTML($html);

$li = $dom->getElementsByTagName('li');

// Print first item value
echo $li->item(0)->nodeValue;

// Print third item value
echo $li->item(2)->nodeValue;

【讨论】：

我专门针对每个列表项的文本值，即数字，是从 nodeValue 返回的还是只是列表项本身？
是的。见here。
这不是总是返回原始 html 的静态值，而不是当前在 DOM 中的值吗？即无论用户对列表做了什么，item(0) 将始终为 1？
是的，但这是服务器端语言的继承，因为它在呈现后无法看到 HTML 内容。如果您希望它是动态的，您应该使用纯 JavaScript 或向后端发送 AJAX 请求。关于您的特定情况，您应该将变量 previously 在 JavaScript 中排序 发送到 PHP。

【解决方案3】：

这就是我要做的，这当然不是最干净的方式，但它应该可以工作。

这假设您正在使用自己的页面，而不是您通过对某些外部站点（例如通过 CURL）的 http 请求获取页面 html 并需要对其进行解析的情况。 DOMDocument 为后一种情况提供了很好的服务。此解决方案适用于前者，因为我假设由于您在其客户端使用 javascript，因此它可能是您自己的页面（除非您在加载该页面后将该 javascript 注入该页面）。

首先，在每个列表项中，我会包含一个服务器端可访问的输入标记。它将用于跟踪位置和值，并在提交表单时将其传递给服务器端脚本。

<form method="POST">
  <ul id="sortable">
    <li class="ui-state-default">1
      <input id="the_list_item_1" name="the_list_item[]" type="text" value="1_0" style="display: none;">
    </li>
    ...
  </ul>
</form>

该值是项目的实际值（示例范围为 1 - 12），其位置由下划线分隔（值 + "_" + 位置）；

如果您只需要在用户完成后将列表提交给服务器进行处理，则该列表需要位于表单变量中。但是，如果您打算只使用 Ajax 将该数据获取到服务器，那么这个解决方案并不是必需的（因为您只需使用 jquery 来获取每个位置和值对并直接在您的 ajax 调用中发送它们）。

当用户拖动项目并更改列表的顺序时，您需要处理这些输入标签的更新。如果您需要了解如何使用可排序事件，请参阅here。也许，在更新时，对于每个列表项，使用新位置调用此函数：

function update_pos(value,pos)
{
  $("#the_list_item_"+value).val(value+"_"+pos);
}

所以在提交表单时，我们现在在 PHP 端。

$list_items = $_POST["the_list_item"]; // This is basically an array of all the list_items, thanks to naming all the list items with "the_list_item[]",  note the empty subscript (square braces).

$ordered_list_items = array();  // Let's push them into an associative array.

foreach($list_items as $li)
{
  $li_split = explode("_",$li);
  if(count($li_split) <= 0)
    continue;  // maybe you'd want to handle this situation differently, it really shouldn't happen at all though.  Here, I'm just ignoring nonsensical values.
  $item_id = $li_split[0];
  $pos = $li_split[1];
  $ordered_list_items[$item_id] = $pos;
}

// Then later you can shoot through this list and do whatever with them.
foreach($ordered_list_items as $item_id => $pos)
{
   // postgres perhaps. Insert if not already there, update regardless.
   pg_query("insert into the_list_item (item_id,position) select '$item_id','$pos' where '$item_id' not in (select item_id from the_list_item where '$item_id' = item_id limit 1));
   pg_query("update the_list_item set position = '$pos' where item_id = '$item_id'");
}

当然，说了这么多，根据您的需要，您可能需要将这些数据重新加载到页面上。因此，循环遍历您的数据库结果（可能是针对该用户），您会将每个 list_item 输出到位。

$list_items = pg_fetch_all(pg_query($sql)); // $sql needs to be the query to get the results. Probably should order by position ascending.

$lic = count($list_items);
?>
<html> and stuff

<form method="POST">
  <ul id="sortable">
<?php
for($i = 0; $i < $lic; $i++)
{
  $li = $list_items[$i];
  echo "<li class=\"ui-state-default\">".$li["item_id"]."<input id=\"the_list_item_".$li["item_id"]."\" name=\"the_list_item[]\" type=\"text\" value=\"".$li["item_id"]."_".$li["position"]."\" style=\"display: none;\"></li>";
}
?>
</ul>
</form>

【讨论】：