Question

我一直在摆弄并且使用我在这里找到的一些代码我设法获得了一些有用的代码，尽管我想知道它是否可以进一步优化。

我试图对代码进行评论，以便显示我的思维过程。如果有人知道更好的方法来实现[获取data-tid属性并将值附加到该tablerow中的跨度到td ]，我很乐意听到它。

＆＃13;

<table>
            <tr data-tid="3"><td class="col_f_icon">aaa</td><td class="col_f_content">fdsfdsf</td></tr>
            <tr data-tid="2"><td class="col_f_icon">aaa</td><td class="col_f_content">fdsfdsf</td></tr>
            <tr data-tid="5"><td class="col_f_icon">aaa</td><td class="col_f_content">fdsfdsf</td></tr>
            <tr data-tid="6"><td class="col_f_icon">aaa</td><td class="col_f_content">fdsfdsf</td></tr>
        </table>

＆＃13;

$j = jQuery.noConflict();
            $j(document).ready(function() {

                topiclistview = $j('[data-tid]').length;                

                // check if data-tid exists
                if (topiclistview > 0) {
                    //set vars
                    var tids = $j('[data-tid]');
                    var tids_array = [];
                    //get the data attribute values and put them in an array
                    $j(tids).each(function(index, item) {
                        tids_array.push($j(item).data('tid'));                        
                    });
                    //run over all tr with the class .col_f_content and append the attribute value
                    $j('.col_f_content').each(function(index, item){
                        $j('<span>'+tids_array[index]+'</span>').appendTo($j(item));
                        //console.log('tr item'+tids_array[index]);
                        });

                    }

                

            });

＆＃13;

Answer 1

性能方面？这可能是一个很好的镜头：

＆＃13;

// iterate over all elements having the data-tid attribute
$("[data-tid]").each(function() {
  // Create our span. No need for a jQuery wrapper.
  var span = document.createElement("span");
  // Set the span text. No need to involve jQuery's data() function
  span.appendChild(document.createTextNode(this.getAttribute("data-tid")));
  // Add the span to your second cell (col_f_content). This should be way faster
  // than creating a new jQuery object via class selector.
  this.cells[1].appendChild(span);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr data-tid="3">
    <td class="col_f_icon">aaa</td>
    <td class="col_f_content">fdsfdsf</td>
  </tr>
  <tr data-tid="2">
    <td class="col_f_icon">aaa</td>
    <td class="col_f_content">fdsfdsf</td>
  </tr>
  <tr data-tid="5">
    <td class="col_f_icon">aaa</td>
    <td class="col_f_content">fdsfdsf</td>
  </tr>
  <tr data-tid="6">
    <td class="col_f_icon">aaa</td>
    <td class="col_f_content">fdsfdsf</td>
  </tr>
</table>

＆＃13;

或者，根据您的需要，您可以仅使用CSS实现类似的功能：

＆＃13;

tr[data-tid]:after {
  display: table-cell;
  vertical-align: middle;
  content: attr(data-tid);
}

＆＃13;

<table>
  <tr data-tid="3">
    <td class="col_f_icon">aaa</td>
    <td class="col_f_content">fdsfdsf</td>
  </tr>
  <tr data-tid="2">
    <td class="col_f_icon">aaa</td>
    <td class="col_f_content">fdsfdsf</td>
  </tr>
  <tr data-tid="5">
    <td class="col_f_icon">aaa</td>
    <td class="col_f_content">fdsfdsf</td>
  </tr>
  <tr data-tid="6">
    <td class="col_f_icon">aaa</td>
    <td class="col_f_content">fdsfdsf</td>
  </tr>
</table>

＆＃13;

Answer 2

您不需要使用中间数组，并且您可以在第一次选择元素时存储元素集（当您测试是否有{{1}的任何元素时}）。

基于类选择应该更高效，因此如果可以将类添加到[data-tid]元素html中，我们可以将它用于我们的选择器。

＆＃13;

data-tid

＆＃13;

$(document).ready(function() {
    'use strict';

    // We want to work with these elems
    var topiclist = $('[data-tid]');

    if (topiclist.length > 0) {
        // Just get the data, make a new elem and append it
        // All in 1 pass
        topiclist.each(function(_, el) {
            var $el = $(el);
            $el.append('<td>' + $el.data('tid') + '</td>');
        });
    }
});

＆＃13;

另请注意，我会将<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <table> <tr data-tid="3"><td class="col_f_icon">aaa</td><td class="col_f_content">fdsfdsf</td></tr> <tr data-tid="2"><td class="col_f_icon">aaa</td><td class="col_f_content">fdsfdsf</td></tr> <tr data-tid="5"><td class="col_f_icon">aaa</td><td class="col_f_content">fdsfdsf</td></tr> <tr data-tid="6"><td class="col_f_icon">aaa</td><td class="col_f_content">fdsfdsf</td></tr> </table>的内容附加到<td>，这是您选择的元素。 <span> is not a legal child of <tr>。如果您想对<tr>执行某些操作，则需要将其包含在<span>中，如果它在表格中。

Answer 3

我尝试这样的事情：

$('[data-tid]').each(function(){
  var value = $(this).data('tid');

  $('<span>' + value + '</span>')
            .appendTo($(this).find('.col_f_content'));
});

（PS：未经测试）

获取数据属性并追加优化

3 个答案: