jQuery 2.1.0 | По-добър начин за ограничаване на дълъг низ и извличане на поднизове от него

Клонингът предоставя както текст, или str, който е бил извлечен, така и добавен с ; към <div id="str"> и arr масив. Клонингът предоставя и "шаблон" за по-нататъшна обработка. В piece, след завършване на извличането на текст и добавяне на отделен div текст към масива, клонираният текст се премахва - което води до "празен" шаблон, вижте el.innerText = "";. В // reverse process, записаният текст в arr попълва отново "празен" ul "шаблон" ; виж син "клонинг". За повторно попълване на "шаблон" с различни данни, може да предостави $.each() с различен масив, имащ същия .length като arr; напр.

var update = ["abc", 123, .., ..];

, със същия ред и дължина като arr , или , 15 , в текущия "шаблон"; след това заменете оригиналния ul с clone (актуализирайте, заменете съществуващия ul с clone, попълнен с различен text)< /a>.

В този jsfiddle (актуализация, добавете нов „шаблон“ към body) „шаблонът“ се попълва отново с елементите' className, вместо предварително извлечените и запазени str, както се случва в частта по-долу

Опитвам

// clone `ul`
var clone = $("ul").clone();
// create `<div id=str>`
var div = $("<div id=str>");
// `str` , text string
var str = "";
// `arr` , text array
var arr = [];
clone.find(".master div").each(function (i, el) {
    $(el).text(function (_, o) {
        return o + ";"
    });
    // substituted `el.innerText.trim()` for `$.trim($(el).text());`
    str = el.innerText.trim();
    arr.push(str);
    div.append(str);
    // replace `innerText` of `div` elements ,
    // with empty string , save `clone` `ul` as template 
    el.innerText = "";
});
// `str`
str = div.text();
// do stuff with `str`
div.css("color", "blue").prependTo("body");
// log processes
console.log(clone, div.text(), str, arr);

// reverse process
$.each(arr, function(k, v) {
    clone.find(".master div").eq(k)
    .text(function(_, o) {
      return o + v.replace(/;$/g, "")
    });
});
// log processes
console.log(clone.find(".master div").text());
// do stuff with clone , after replacing text
clone.css("color", "blue").appendTo("body");

jsfiddle http://jsfiddle.net/guest271314/jhpsz018/

Масивът от обекти е може би най-добрият начин за съхраняване на вашите данни, където всеки обект има следната форма:

var exampleRow = {
  id: 123,
  nameid: "MN9478",
  name: "Paula",
  title: "My plane",
  note: "how are you"
};

След това можете да получите достъп до атрибутите:

exampleRow.id // 123
// or
exampleRow["id"] // Also 123

Поставянето на всеки от тези редове в масив ви дава данните в нормализирана форма:

var data = [{
    id: 123,
    nameid: "MN9478",
    name: "Paula",
    title: "My plane",
    note: "how are you"
  }, {
    id: 456,
    nameid: "MN7649",
    name: "John",
    title: "My boat",
    note: "I am good"
  }, {
    id: 789,
    nameid: "MN3995",
    name: "Janette",
    title: "My car",
    note: "where are you"
  }
];

След това в този момент можете лесно да трансформирате данните в една от двете структури:

// For the complicated DOM structure
data.map(function(userInfo) {
    // Simplified to make it clear(er) what's going on
    return "<li><div class='master'><div class='note'>" + userInfo.note + "</div><div class='id'>" + ... etc. ... + "</div></li>";
});

// For the single string
data.reduce(function(finalString, userInfo) {
  return finalString + ";" + Object.keys(userInfo).map(function(k) { return userInfo[k]; }).join(";");
}, "");