Преобразование javascript в jquery (getelementbyid, tagname, innertext, innerhtml)

Question

У меня есть код, написанный в javascript n, когда я пытаюсь преобразовать в 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); 

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

Answer 2

Проверьте следующий фрагмент код

$(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>

Надеется, что это помогает