javascript - 如何从localStorage附加后显示的html获取div数据?
问题描述
如何var projectdata = localStorage.getItem('createProject')
从突出显示的行中获取数据。我的控制台日志projectdata
如下所示,其中包含多条记录:
.cleaner{float:left; padding:20px 10px 10px 20px;}
.rows{width: 1000px; min-height: 80px;}
.rowsAlt{
background-color: #edece8;
}
.cols{height: 100%; float:left;}
.col1{width: 100px; float:left; padding:20px 10px 10px 20px;}
.col2{width: 100px; float:left; padding:20px 10px 10px 20px;}
.col3{width: 200px; float:left; padding:20px 10px 10px 20px;}
.col4{width: 150px; float:left; padding:20px 10px 10px 20px;}
.col5{width: 150px; float:left; padding:20px 10px 10px 20px;}
.col6{width: 100px; float:left; padding:20px 10px 10px 20px;}
#row2{
margin-left:20px;
margin-top: 50px;
position: relative;
width: 90%;
margin: 20px 0px 0px 20px;
}
.highlight { background: #ebdb34 !important; }
.projecteditLink{
height:10px;
border-radius: 5px;
background-color: #42f56f;
color:#fff;
}
<div class="row"><div id="row2" class="rows rowsAlt"><div id="projectName_1" class="col1">Sun</div><div id="clientName_1" class="col2">sun</div><div class="col3">lion,wolves</div><div id="projectStartDate_1" class="col4">Nov-2019</div><div class="col5">Mr Rambo</div><div class="cleaner">Added Sun here</div><div class="col6"><a class="projecteditLink" href="">Edit Link</a></div></div></div><div class="row"><div id="row2" class="rows rowsAlt"><div id="projectName_2" class="col1">Moon Project</div><div id="clientName_2" class="col2">earth</div><div class="col3">lion,wolves</div><div id="projectStartDate_2" class="col4">Nov-2019</div><div class="col5">Mr Simmer</div><div class="cleaner">Added Sun here</div><div class="col6"><a class="projecteditLink" href="">Edit Link</a></div></div></div><div class="row"><div id="row2" class="rows rowsAlt"><div id="projectName_3" class="col1">Simple Demo</div><div id="clientName_3" class="col2">earth</div><div class="col3">man,lion</div><div id="projectStartDate_3" class="col4">Nov-2019</div><div class="col5">Mr Test</div><div class="cleaner">Added Simple here</div><div class="col6"><a class="projecteditLink" href="">Edit Link</a></div></div></div>
// 想Project One, SAAS, man
从变量中获取类似 , 的文本projectdata
。如何做到这一点?
var divCount = 1;
$(document).ready(function(){
document.getElementById('dashboardArea').innerHTML = "";
var data = localStorage.getItem('saveToLocal');
$('#dashboardArea').append(data);
$("body").on('click', '#saveProjecttoDash', function(e) {
var projectdata = localStorage.getItem('createProject');
console.log("Same here:"+projectdata);
// How to get data from `projectdata` html ?
$('#overlay').fadeOut(300);
var someDiv = '<div class="row"><div id="droppable'+divCount+'" class="pull-bottom" style="height:500px;background:#e3e8e7"><h3></h3><span class="clientNameDash"></span><img src="sampleImg.PNG" id="dashboardImage-"><img id="deleteDashboard" src="delete-512.png"></div></div>';
$('#dashboardArea').append(someDiv);
divCount++;
var saveToLocalStorage = document.getElementById('dashboardArea').innerHTML;
localStorage.setItem("saveToLocal",saveToLocalStorage);
});
});
解决方案
您可以使用此函数将字符串转换为 HTML 对象(包裹在 div 周围)
function createElementFromHTML (htmlString) {
var div = document.createElement("div");
div.innerHTML = htmlString.trim();
return div;
}
然后选择所需的值getElementsByClassName
const projectdata = localStorage.getItem('createProject');
const projectDataHTML = createElementFromHTML(projectdata);
const getInnerText= element => element.innerText;
const projectNames = [...projectDataHTML.getElementsByClassName('col1')].map(getInnerText);
const clientNames = [...projectDataHTML.getElementsByClassName('col2')].map(getInnerText);
结果
projectNames ["Sun", "Moon Project", "Simple Demo"]
clientNames ["sun", "earth", "earth"]
同样,您也可以使用它们的类名(col3、col4...)来挑选其他值
获取突出显示的行记录
const [highlightedRow] = projectDataHTML.getElementsByClassName('highlight');
const highlightedProjectName = highlightedRow.getElementsByClassName("col1")[0].innerText;
const highlightedClientName = highlightedRow.getElementsByClassName("col2")[0].innerText;
推荐阅读
- c++ - C++ 代码因“分段错误”而失败,但我不知道为什么
- javascript - 使用新的 gcm_sender_id 时 pushManager 订阅不返回任何内容
- angular - 将 await/async 函数转换为可观察对象的最简单方法
- reactjs - react redux“双向”绑定的最佳架构
- python - 使用 Python 在 SQL 查询中传递数据库名称变量
- amazon-web-services - 哪个使用 Cognito 用户池或身份池进行社交登录?
- python - 通过使用 pybind11 的虚函数通过引用传递 std::vector 的问题
- javascript - React - 从嵌入式组件中的数组获取内容
- python - 创建一个函数以遍历现有数据框并将值添加到新列
- python - 如何使用 GitPython 在一段时间内跟踪 Git 提交