javascript - javascript 到 jquery 的转换(getelementbyid、标记名、innertext、innerhtml)

Question

我有一些用 javascript 编写的代码，当我尝试在 jQuery 中进行转换时，出现错误。

    var holder = document.getElementById('filedetails')
    , rows = holder.getElementsByTagName('tr')
setSuccess = function(filename) {
      if (holder != null) {
        for (i = 0, j = rows.length; i < j; ++i) {
          cells = rows[i].getElementsByTagName('td');
          if (cells[0].innerText == filename && cells[3].innerText != "error!") {
            cells[3].innerHTML = "<a href='#' class='file-delete ss-delete no-click'></a>";
          }
        }
      }
    }

我试过了

var holder = $('#filedetails"), 
    rows = $('#filedetails tr") 

我不知道如何处理innertext和innerhtml。

<div data-behavior="delete-process" id="holder">
                <table>
                  <thead>
                    <tr>
                      <th class="medium-5">Name</th>
                      <th class="medium-3">Size</th>
                      <th class="medium-3">Type</th>
                      <th class="medium-1"></th>
                    </tr>
                  </thead>
                  <tbody id="filedetails">
<tr data-filesize="1.4" data-filename="Sample Image.jpg">
<td><strong>Sample_Image</strong></td>
<td class="nodesize">1.4 MB</td>
<td>JPG</td>
<td class="file-loading"><a href="#" class="file-delete ss-delete"></a></td></tr>
</tbody>
</table>
<div class="margin bottom large text-center drag-desc">drag and drop files here.</div>
              </div>

Answer 1

这是代码的“jqueryized”版本

var holder = $('#filedetails'),
  rows = holder.find('tr');
var setSuccess = function(filename) {
  rows.each(function() {
    var cells = $(this).find('td');
    if (cells.eq(0).text() == filename && cells.eq(3).text() != "error!") {
      cells.eq(3).html("<a href='#' class='file-delete ss-delete no-click'></a>");
    }
  });
};
setSuccess("Sample_Image");

仅使用行的替代方案:

var  rows = $('#filedetails').find('tr');
var setSuccess = function(filename,useme) {
  useme.each(function() {
    var cells = $(this).find('td');
    if (cells.eq(0).text() == filename && cells.eq(3).text() != "error!") {
      cells.eq(3).html("<a href='#' class='file-delete ss-delete no-click'>freebeer</a>");
    }
  });
};
setSuccess("Sample_Image", rows);

要不使用位置表元素，请使用类并按 TD 单元格内的类进行过滤，如下所示:这假设每行使用一个类。

var rows = $('#filedetails').find('tr');
var setSuccess = function(filename, useme) {
  useme.each(function() {
    var cells = $(this).find('td');
    if (cells.filter('.file-name').text() == filename
          && cells.filter('.file-loading').text() != "error!") {
      cells.filter('.file-loading')
        .html("<a href='#' class='file-delete ss-delete no-click'>noclick</a>");
    }
  });
};
setSuccess("Sample_Image", rows);

Fiddle https://jsfiddle.net/MarkSchultheiss/0fx2jms7/2/