Javascript 在jQuery中获取数据的另一种方法是重复使用parent()和next()?
我有一个任务列表数据的HTML表,我试图获取所有数据值,并在单击一行时将它们存储到一个对象中 下面我有一些HTML和JavaScript的演示,它们的功能完全符合我的需要 问题是,我知道jQuery部分的质量很差,因为它调用了这样的东西Javascript 在jQuery中获取数据的另一种方法是重复使用parent()和next()?,javascript,jquery,Javascript,Jquery,我有一个任务列表数据的HTML表,我试图获取所有数据值,并在单击一行时将它们存储到一个对象中 下面我有一些HTML和JavaScript的演示,它们的功能完全符合我的需要 问题是,我知道jQuery部分的质量很差,因为它调用了这样的东西 $taskEl.parent().parent('td').next().next().next().text() 我觉得这些可以改进,但我不确定如何改进。这其中的大部分已经在一个我正试图清理的现有项目上完成了,这1部分真的让我很烦 如果您能以其他方式帮助我获
$taskEl.parent().parent('td').next().next().next().text()
我觉得这些可以改进,但我不确定如何改进。这其中的大部分已经在一个我正试图清理的现有项目上完成了,这1部分真的让我很烦
如果您能以其他方式帮助我获取数据,我将不胜感激
或者这是最有效的方法
如果需要,我还可以修改一些HTML,如果需要添加新的ID或数据属性
jsFIDLE demo…当您单击任务标题中的链接时,它会将所选的值打印到DOM中以进行演示…:
演示JavaScript从DOM任务列表中获取任务数据并使用它创建JS对象:
//Open Task Modal when a Task record is clicked in Task List
$('body').on('click', '.taskName', function() {
// Set and Cache Task ID from clicked on Task Item
var taskId = $(this).parent().parent().parent().dataAttr('task-id');
var $taskEl = $(this);
// Populate Task Data Object from DOM values
taskDataObject = {
//projectId: projectTaskModal.cache.projectId,
taskId: taskId,
taskName: $taskEl.text(),
taskDescription: $taskEl.next('.description').text(),
taskStatus: $taskEl.parent().parent('td').next().text(),
taskPriority: $taskEl.parent().parent('td').next().next().text(),
taskTags: $taskEl.parent().parent('td').next().next().next().text(),
taskCreatedDate: $taskEl.parent().parent('td').next().next().next().next().text(),
taskModifiedDate: $taskEl.parent().parent('td').next().next().next().next().next().text(),
taskDueDate: $taskEl.parent().parent('td').next().next().next().next().next().next().text(),
};
});
演示任务列表HTML
<span id="projectIdPlaceholder" data-project-id="1234"></span>
<table>
<!-- test task list record 1 -->
<tr id="task-row-1414135033730" data-task-id="1414135033730">
<td width="1%" class="task-checkbox">
<div class="status_update status-checkbox-Not-Started" data-id="1414135033730" data-status="Not Started" id="1414135033730"></div>
</td>
<td width="59%" class="task-name">
<div><span id="1414135033730-taskName" class="taskName strikethrough">Add a Plugin System similar to WordPress Action and Filter Hooks
<span class="open-description-icon open-description-icon-close" title"toggle="" description="" view"="">+</span>
</span>
<div id="1414135033730-taskDescription" class="description" style="display: block;">Project module will Fire Events before and After key events and Plugins in a custom/modulename/plugins/ folder will load and be able to Listen for these Event Hooks and then run it;s own code before and after these actions are executed!</div>
</div>
</td>
<td width="10%">
<div id="1414135033730-status" class="Not Started status"> Not Started</div>
</td>
<td width="10%">
<div id="1414135033730-taskPriority" class="priority">Low</div>
</td>
<td width="10%">
<div class="type">Other</div>
</td>
<td width="10%">
<div id="1414135033730-createdDate" class="createdDate">2014-10-24 07:18:41</div>
</td>
<td width="10%">
<div id="1414135033730-modifiedDate" class="modifiedDate">2014-10-24 07:18:41</div>
</td>
<td width="10%">
<div id="1414135033730-dueDate" class="dueDate">None</div>
</td>
</tr>
<!-- test task list record 2 -->
<tr id="task-row-1414135033731" data-task-id="1414135033731">
<td width="1%" class="task-checkbox">
<div class="status_update status-checkbox-Completed" data-id="1414135033731" data-status="Completed" id="1414135033731"></div>
</td>
<td width="59%" class="task-name">
<div>
<span id="1414135033731-taskName" class="taskName">Testing Task Record Number 2
<span class="open-description-icon open-description-icon-close" title"toggle="" description="" view"="">+</span>
</span>
<div id="1414135033731-taskDescription" class="description" style="display: block;">My project task description for demo testing task record number 2!</div>
</div>
</td>
<td width="10%">
<div id="1414135033731-status" class="Completed status">Completed</div>
</td>
<td width="10%">
<div id="1414135033731-taskPriority" class="priority">High</div>
</td>
<td width="10%">
<div class="type">Magento</div>
</td>
<td width="10%">
<div id="1414135033731-createdDate" class="createdDate">2014-10-27 03:10:14</div>
</td>
<td width="10%">
<div id="1414135033731-modifiedDate" class="modifiedDate">2014-10-27 03:22:24</div>
</td>
<td width="10%">
<div id="1414135033731-dueDate" class="dueDate">06/21/2015</div>
</td>
</tr>
</table>
添加一个类似于WordPress操作和过滤器挂钩的插件系统
+
项目模块将在关键事件前后触发事件,自定义/modulename/Plugins/文件夹中的插件将加载,并能够侦听这些事件挂钩,然后运行它;在执行这些操作之前和之后都有自己的代码!
没有开始
低
其他
2014-10-24 07:18:41
2014-10-24 07:18:41
没有一个
测试任务记录2号
+
演示测试任务记录2的我的项目任务描述!
完整的
高
马根托
2014-10-27 03:10:14
2014-10-27 03:22:24
06/21/2015
我建议您使用data-*
属性来存储值,并使用JavaScript
动态构建对象,而不是手动选择每个元素,例如:
HTML:
演示:
另外,此方法还允许您显示与其值不同的值,例如,显示人类可读的日期,但将其序列化为unix时间戳。而不是手动选择每个元素,我建议您使用
data-*
属性来存储值,并使用JavaScript
动态构建对象,例如:
HTML:
演示:
另外,此方法还允许您显示与其值不同的值,例如,显示人类可读的日期,但将其序列化为unix时间戳。您的不同值位于
div
和span
中,您可以使用find()
及其所单击行中的类名
大概是这样的:
//Open Task Modal when a Task record is clicked in Task List
$('body').on('click', '.taskName', function() {
// Get the task (row) that will be used for running all the selections
$task = $(this).closest("tr");
// Populate Task Data Object from DOM values
taskDataObject = {
//projectId: projectTaskModal.cache.projectId,
taskId: $task.data('task-id'),
taskName: $task.find(".taskName").text(),
taskDescription: $task.find(".description").text(),
taskStatus: $task.find(".status").text(),
taskPriority: $task.find(".priority").text(),
taskTags: $task.find(".type").text(),
taskCreatedDate: $task.find(".createdDate").text(),
taskModifiedDate: $task.find(".modifiedDate").text(),
taskDueDate: $task.find(".dueDate").text()
};
});
编辑:为了保持一致,我将
$(this.text()
替换为$task.find(.taskName”).text()
,并将$(this.next(.description”).text()替换为$task.find(.description”).text()
。并删除了taskId
和taskEl
,因为它们是冗余的
Edit2:将$(this).parent().parent().parent()
替换为$(this).closest(“tr”)
。这样,如果HTML结构将来发生变化(并且父级的数量也发生了变化),任务行仍然会被选中,代码应该可以正常工作。您的不同值位于div
和span
中,并且具有描述性类名,您可以使用find()
及其所单击行中的类名
大概是这样的:
//Open Task Modal when a Task record is clicked in Task List
$('body').on('click', '.taskName', function() {
// Get the task (row) that will be used for running all the selections
$task = $(this).closest("tr");
// Populate Task Data Object from DOM values
taskDataObject = {
//projectId: projectTaskModal.cache.projectId,
taskId: $task.data('task-id'),
taskName: $task.find(".taskName").text(),
taskDescription: $task.find(".description").text(),
taskStatus: $task.find(".status").text(),
taskPriority: $task.find(".priority").text(),
taskTags: $task.find(".type").text(),
taskCreatedDate: $task.find(".createdDate").text(),
taskModifiedDate: $task.find(".modifiedDate").text(),
taskDueDate: $task.find(".dueDate").text()
};
});
编辑:为了保持一致,我将$(this.text()
替换为$task.find(.taskName”).text()
,并将$(this.next(.description”).text()替换为$task.find(.description”).text()
。并删除了taskId
和taskEl
,因为它们是冗余的
Edit2:将$(this).parent().parent().parent()
替换为$(this).closest(“tr”)
。这样,如果HTML结构在将来发生变化(并且父元素的数量也发生变化),任务行仍然会被选中,代码应该可以正常工作。因为您有可用的任务ID,而div都有ID,所以我会直接针对元素ID。在jQuery中,越具体越好
$('body').on('click', '.taskName', function() {
// Get the task (row) that will be used for running all the selections
var taskid = $(this).closest("tr").dataAttr('task-id');
var taskSel = "#" + taskid + "-";
// Populate Task Data Object from DOM values
taskDataObject = {
taskId: taskid;,
taskName: $(taskSel + "taskName").text(),
taskDescription: $(taskSel + "taskDescription").text(),
taskStatus: $(taskSel + "taskStatus").text(),
taskPriority: $(taskSel + "taskPriority").text(),
taskTags: $(taskSel + "taskTags").text(),
taskCreatedDate: $(taskSel + "taskCreatedDate").text(),
taskModifiedDate: $(taskSel + "taskModifiedDate").text(),
taskDueDate: $(taskSel + "taskDueDate").text(),
};
});
因为您有可用的任务ID,并且div都有ID,所以我将直接针对元素ID。在jQuery中,越具体越好
$('body').on('click', '.taskName', function() {
// Get the task (row) that will be used for running all the selections
var taskid = $(this).closest("tr").dataAttr('task-id');
var taskSel = "#" + taskid + "-";
// Populate Task Data Object from DOM values
taskDataObject = {
taskId: taskid;,
taskName: $(taskSel + "taskName").text(),
taskDescription: $(taskSel + "taskDescription").text(),
taskStatus: $(taskSel + "taskStatus").text(),
taskPriority: $(taskSel + "taskPriority").text(),
taskTags: $(taskSel + "taskTags").text(),
taskCreatedDate: $(taskSel + "taskCreatedDate").text(),
taskModifiedDate: $(taskSel + "taskModifiedDate").text(),
taskDueDate: $(taskSel + "taskDueDate").text(),
};
});
这里有多种选择,取决于您的需要
此示例不是最快的,但接近最佳性能,
它的最大用途是从$selector重新加载DOM元素,这意味着处理DOM的并行事件将呈现相同的内容,
与$this=$(this)相反,重新选择您的dom元素,这同样不是性能方面的最佳实践(在dom中搜索),仍然比动态修改的html提供最佳结果
您的电话:
$('body').on('click', '.taskName', function() {
var taskId = $(this).attr('id').replace('-taskName', '');
taskDataObject = {
//projectId: projectTaskModal.cache.projectId,
taskId: taskId,
taskName: $(this).text(),
taskDescription:$('[id="' + taskId + '-taskDescription"').text(),
taskStatus:$('[id="' + taskId + '-status"').text(),
taskPriority: $('[id="' + taskId + '-taskPriority"').text(),
taskTags: "undefined please defeine corect atribute on div",
taskCreatedDate: $('[id="' + taskId + '-createdDate"').text(),
taskModifiedDate: $('[id="' + taskId + '-modifiedDate"').text(),
taskDueDate: $('[id="' + taskId + '-dueDate"').text(),
};
deepTrim(taskDataObject);
printObjectToDom(taskDataObject);
});
您可以在主父html上编写自定义选择器,类似于我的示例
var T_REX = $(this).parent().parent()... whatever;
var T_REX_CUBS = TREX.children();
var taskname = T_REX_CUBS[0].find("div.taskName").text();
还是最简单的
var T_REX = $(this).closest('tr');
var taskid = T_REX.attr('data-task-id');
var taskname = T_REX.find("div.taskName").text();
现在最快的选择是保存主父对象,而不是应用jquery自定义选择器,但如果表中的数据正在实时更改,则不建议这样做 根据您的需要,这里有多种选择
此示例不是最快的,但接近最佳性能,
它的最大用途是从$selector重新加载DOM元素,这意味着处理DOM的并行事件将呈现相同的内容,
重新选择dom元素而不是$this=$(this),这同样不是最好的做法