将javascript转换为jquery（getelementbyid，标记名，innertext，innerhtml）

Question

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

    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

检查以下代码段

 $(document).ready(function(){ var holder = $("#filedetails") , rows = holder.find('tr'); var rowsLength=rows.Length; var setSuccess = function(filename) { if (holder != null) { var j=rows.length; for (var i=0; i < j; ++i) { var cells = $(rows[i]).find('td'); var filename=$('.filename'); var file=$('.file'); if (filename.text() == filename && file.text() != "error!") { var aElement=$("<a/>"); aElement.href="#"; aElement.class="file-delete ss-delete no-click"; file.html(aElement); } } } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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 class="filename"><strong>Sample_Image</strong></td> <td class="nodesize">1.4 MB</td> <td>JPG</td> <td class="file-loading file"><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 2

这是您代码的“ jquery化”版本

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);

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