正在查找最后一次出现的文本

Finding last occurrence of text

本文关键字:文本 最后一次 查找      更新时间:2023-09-26

我在html中有以下类型的表,它是由php动态生成的:

<tr><td>Kiss the Girls</td><td>2016-01-01</td></tr>
<tr><td>Kiss the Girls</td><td>2016-02-05</td></tr>
<tr><td>Along Came a Spider</td><td>2016-01-07</td></tr>
<tr><td>Along Came a Spider</td><td>2016-01-22</td></tr>
<tr><td>Along Came a Spider</td><td>2016-03-31</td></tr>

我希望能够有一个动态显示过滤器,允许用户点击一个框,隐藏除最新版本外的所有手稿。所以它可能看起来像:

<tr><td>Kiss the Girls</td><td>2016-02-05</td></tr>
<tr><td>Along Came a Spider</td><td>2016-03-31</td></tr>

在这一点上,<tr><td>标签都没有id或类,但我可以很容易地将类添加到第一列(例如,<td class='bookTitle'>)。页面上只有一个表,php已经按日期对其进行了排序。我对jQuery或原生JavaScript持开放态度,不过我认为使用jQuery会更容易。似乎只需在更改名称之前抓住最后一行就可以完成,但我不知道该怎么做。有什么想法吗?

根据'Seems like it could be done by just grabbing the last row before it changes names',这就是我提出的:

var rows = $("table tr");
if(rows.length > 0){
  var last = $(rows[0]).find('td')[0].innerText;
  for(var i=1; i<rows.length; i++){
     var row = $(rows[i]);
     var text = row.find('td')[0].innerText;
     if(text === last){
        $(rows[i-1]).hide();
     }
     last = text;
  }
}
请参阅CodePen上Tan Li Hau(@tanhauhau)的Pen Finding last occurrence of text。

tr上迭代并存储在键值对中,其中key为td内容,value为对象,然后从中获取对象。

var a = {}; // object for storing dom element object
$('table tr').each(function() {
  a[$('td:first', this).text().trim()] = this; // update the dom element object based on the column
});
var $res = $($.map(a, function(v) {
  return v; // get objects and convert to jQuery object
}));
console.log($res);
$res.css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Kiss the Girls</td>
    <td>2016-01-01</td>
  </tr>
  <tr>
    <td>Kiss the Girls</td>
    <td>2016-02-05</td>
  </tr>
  <tr>
    <td>Along Came a Spider</td>
    <td>2016-01-07</td>
  </tr>
  <tr>
    <td>Along Came a Spider</td>
    <td>2016-01-22</td>
  </tr>
  <tr>
    <td>Along Came a Spider</td>
    <td>2016-03-31</td>
  </tr>
</table>


FYI:如果您想维护顺序,那么使用索引和对象数组的值并根据设置顺序

您可以反向迭代,并在进行时删除您以前看到的所有内容:

function filterPreviousVersions ( ) {
    var seen = {};
    $( $('tr').get( ).reverse( ) ).each( function ( ) {
        var text = $( 'td', this ).first( ).text();
        if ( seen[ text ] )
            $( this ).remove();
        seen[ text ] = true;
    } );
}
filterPreviousVersions();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Kiss the Girls</td>
    <td>2016-01-01</td>
  </tr>
  <tr>
    <td>Kiss the Girls</td>
    <td>2016-02-05</td>
  </tr>
  <tr>
    <td>Along Came a Spider</td>
    <td>2016-01-07</td>
  </tr>
  <tr>
    <td>Along Came a Spider</td>
    <td>2016-01-22</td>
  </tr>
  <tr>
    <td>Along Came a Spider</td>
    <td>2016-03-31</td>
  </tr>
</table>

如果在添加行时按递增顺序添加id,

你可以使用这个:

var valArray = [];
$('.maindiv').each(function() {
  valArray.push(parseInt($(this).attr('id'), 10));
})
valArray.sort(function(a, b) {
  return a - b
})
alert("Last row : " + document.getElementById(valArray[valArray.length - 1]).innerHTML); // highest`
alert("Second last : " +  document.getElementById(valArray[valArray.length - 2]).innerHTML);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="2" class="maindiv">Contents in row 2</div>
<div id="5" class="maindiv">Contents in row 5</div>
<div id="3" class="maindiv">Contents in row 3</div>
<div id="1" class="maindiv">Contents in row 1</div>
<div class="main">Contents in test row</div>
<div id="4" class="maindiv">Contents in row 4</div>

将其放在一起:

成功:(对于具有许多重复值的大型表,可能会对性能产生一些影响)

$('tr').each(function(){
  $("tr :contains('" + $('td', this).first().html() + "')").last()
   .parent().css('color', 'red'); 
}); 

琥珀色版本的解释:-

$('tr').each(function(){ // for each row of the table
  $("tr                    // find a child inside a tr 
     :contains('"          // that contains the text
    +  $('td', this)         // present within a td of the row (in line 1) 
      .first().html()        // at the beginning  
    + "')")               // Using string concat to pass variable to `contains` selector)  
    .last()               // at the end (last occurence of text)
   .parent()              // invoke `parent()` to select whole row
   .css('color', 'red');  // apply css to identify the desired row.
});

Verbose:(使用ECMAScript6或$.unique()Set从完整的名称列表中删除重复项。这样,当代码末尾的forEach循环运行时,每个名称只迭代一个。)

var uniqueNames = []; 
$('tr').each(function(){
  uniqueNames.push($('td', this).first().html());  
});  // this will return the list of names from the table
// Remove duplicates from the list of names
uniqueNames = new Set(uniqueNames); // OR: uniqueNames = $.unique(uniqueNames);
uniqueNames.forEach(function(el){
  $("tr :contains('" + el + "')").last().parent().css('color', 'red');
});