在jQuery中獲取數據的另一種方法比反覆使用parent（）和next（）？

Question

我有一個任務列表數據的HTML表，我試圖獲取所有的數據值，並在點擊一行時將它們存儲到一個對象。

我有一些HTML和下面的JavaScript的演示，所有功能正如我所需要的一樣。

的問題是，我知道了jQuery的部分是非常糟糕的質量，因爲它要求這樣的事情......

$taskEl.parent().parent('td').next().next().next().text() 

我覺得這些都可以改善，但我不知道怎麼會這樣。其中大部分已經在我正在嘗試清理的現有項目上完成，而這1節真的讓我感到困擾。

我希望有其他方式獲取數據的任何幫助嗎？

或者如果這是最有效的方法？

此外，如果我需要我有權修改某些HTML，如果需要添加新的ID或數據屬性。

的jsfiddle演示 ...當你點擊任務標題鏈接，將打印，它選擇了對DOM的演示puirposes值...：DEMO

演示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> 

Answer 1

除了手動選擇每個元件，建議你使用data-*屬性來存儲值，並使用JavaScript動態建立對象，例如：

HTML：

<table id="table"> 
    <tr> 
     <td data-name="taskName" data-value="Test"> 
      <div class="foo">Test</div> 
     </td> 
     <td data-name="taskDate" data-value="1439275213"> 
      <div class="foo">2014-10-24 07:18:41</div> 
     </td> 
    </tr> 
</table> 

JavaScript的：

var $nodes = $('#table').find('td[data-name]'); // find TDs with 'data-attr' 
var attributes = {}; 
$nodes.each(function() { // generate object with all data-name/data-value pairs 
    var $node = $(this); 
    attributes[$node.attr('data-name')] = $node.attr('data-value'); 
}); 
console.log(attributes); // prints { taskName: "Test", taskDate: "1439275213" } 

演示：http://jsfiddle.net/andunai/uu65ntks/

P. S.此方法還允許您顯示與其值不同的值，例如，顯示人類可讀的日期，但將其序列化爲unix時間戳。

Answer 2

你不同的價值觀是div和span用描述性的類名，你可以使用find()和被點擊的行內他們的className只選擇他們。

事情是這樣的：

//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，因爲它們是多餘的。

編輯2：替換$(this).parent().parent().parent()與$(this).closest("tr")。這樣，如果將來HTML結構發生變化（父母數量發生變化），仍然會選擇任務行，代碼應該沒有問題。

Answer 3

由於您有任務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(), 
    }; 
}); 

Answer 4

有多種選擇這裏，取決於你需要什麼，

這個例子是不是最快的，但關閉最佳性能， 這個偉大的用法是從$選擇重裝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自定義選擇器，但這不是th e建議您的表格數據是否實時更改。