將ID_x與ID_x匹配，或者通過+ i循環遍歷id

Question

我希望按照這些方針做一些事情，但已經陷入困境。

基本上我有一個for循環

 $(document).ready(function() { var foo = function() { for (var i = 0; i < 10; i++) { $('#event_').attr('id', 'event_' + i); $('#unformatted_').attr('id', 'unformatted_' + i); $('#formatted_').attr('id', 'formatted_', +i); } }; /* formatting date and time (from sql YYYY-MM-DD HH:MM:SS.0000 - need DD-MM-YYYY HH:MM:SS */ /* this is where i want to do something like #unformatted + i to cycle through each span with #unformatted_ (1,2,3,4 etc), grab the html (the date and time), format them, and display them in #formatted_ (1,2,3,4 etc) but with the corresponding one of course*/ var startdate = $('#unformatted_').html(); var subyear = (startdate).substr(0, 4); var submonth = (startdate).substr(5, 2); var subday = (startdate).substr(8, 2); var starttime = (startdate).substr(11, 8); var subfull = (subday + "-" + submonth + "-" + subyear); $('#formatted_').html(subfull + " " + starttime); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="event_"> <th>Table Header</th> <tr> <td> <span id="unformatted_">" . $row["date"]. " " . $row["time"]. "</span> <span id="formatted_"></span> </td> </tr> </table> <table id="event_"> <th>Table Header</th> <tr> <td> <span id="unformatted_">" . $row["date"]. " " . $row["time"]. "</span> <span id="formatted_"></span> </td> </tr> </table> <table id="event_"> <th>Table Header</th> <tr> <td> <span id="unformatted_">" . $row["date"]. " " . $row["time"]. "</span> <span id="formatted_"></span> </td> </tr> </table> 

每個#event _，＃unformatted_和#formatted_都會獲得一個放在末尾的數字。 因此，表1中的所有三個ID均具有_1，表2中的所有ID具有_2。

然后，我需要將文本輸出保存為#unformatted_（來自SQL表的日期，用php回顯，以考慮日歷或議程），一旦通過抓取substr的變量對其進行了格式化，則需要將其顯示為#formatted_。 目前，我只能獲取第一個表（＃event_1）來顯示＃formatted_1文本，而＃formatted_2的＃event_2部分為空（依此類推）。

我已經盡力讓＃formatted_1顯示在＃formatted_2和＃formatted_3中，但是我似乎無法

#event_1 -> #unformatted_1 -> #formatted_1
#even_2 -> #unformatted_2 -> #formatted_2
..so on and so forth.

如果您運行摘要，您將看到我在說什么。

我相當業余，所以任何幫助將不勝感激！ PS。 在閱讀有關解決問題的方法時，我已經看到了很多有關JSON和AJAX的討論，我應該改用這些嗎？

我正在建立的網站基本上是一個活動網站。 所以說這是一個喜劇俱樂部。 用戶訪問該站點，查看定制的日歷（每個節目的sql數據庫，通過php回顯行），每個月都是它自己的.php（即jan.php）。 我需要添加addthisevent.com將此事件按鈕添加到每個日歷項，以便用戶可以輕松地將其添加到google cal或ical。 如果您知道一種更簡單的方法，我將不勝感激！ 或者，如果有一種簡單的方法來創建可被所有Google cal，ical等讀取的XML文件，並且可以通過用戶單擊鏈接來啟動它，那么我也很高興。

任何幫助，將不勝感激。 我就像大海中沒有翅膀的鳥一樣陷入困境。

Answer 1

為所有跨度提供類class="unformatted"和class="formatted"而不是id。 遍歷所有unformatted元素，獲取每個元素的html（日期），將其重新格式化，然后使用jQuery的eq()將修改后的文本設置為匹配的formatted元素

 // give all your spans, classes `class="unformatted"` and `class="formatted"` // loop through all of the `unformatted` elements $('.unformatted').each(function(index, element){ // use a regular expression to get an array of the different date parts // then rearrange them if($(element).html().match(/\\d{4}-\\d\\d-\\d\\d\\s\\d\\d:\\d\\d:\\d\\d/)){ var dateParts= $(element).html().match(/(\\d{4})-(\\d\\d)-(\\d\\d)\\s(\\d\\d:\\d\\d:\\d\\d)/); // dateParts will now be an array with 4 items --> [YYYY, MM, DD, HH:MM:SS] // use jquery's `eq()` to set the modified text // to the matching `formatted` element $('.formatted:eq('+index+')').html( dateParts[3]+'-'+ dateParts[2]+'-'+ dateParts[1]+' '+ dateParts[4] ); } }); 

 .formatted{ margin-left:20px; color:green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table > <th>Table Header</th> <tr> <td> <span class="unformatted">1983-12-22 06:22:25.0000</span> <span class="formatted"></span> </td> </tr> </table> <table > <th>Table Header</th> <tr> <td> <span class="unformatted">1943-06-15 12:22:14.0000</span> <span class="formatted"></span> </td> </tr> </table> <table > <th>Table Header</th> <tr> <td> <span class="unformatted">1999-12-04 02:22:27.0000</span> <span class="formatted"></span> </td> </tr> </table>