正在查找最后一次出现的文本
Finding last occurrence of text
我在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');
});
相关文章:
- Javascript匹配以从URL中删除部分文件名-替换最后一次出现的内容
- 正在查找最后一次出现的文本
- JavaScript只有在最后一次被调用时才运行函数
- 字符串拆分并获取第一次和最后一次出现
- Regex-从第二次出现到最后一次出现
- 我如何可以忽略以前的选择,只写最后一次选择
- 异步mongodb更新循环中最后一次迭代后的重定向
- 链接超时会导致最后一次超时被拒绝
- 变量在循环的最后一次迭代中变为未定义
- 将匹配字符串中最后一次出现的点的正则表达式
- 仅附加文本框一次
- 删除/隐藏链接后最后一次出现的字符串
- 如何获取单击元素的类值,并使用此值在 jquery 中最后一次出现此类之后放置一段 html 代码
- 如何在最后一次出现某个字符后获取 url 中的参数
- 在使用 CasperJS 遍历参数化 URL 时,仅执行最后一次迭代
- 在javascript中获取除最后一次外的所有模式
- 使用lookahead获取javascript中模式的最后一次出现
- 删除javascript中最后一次出现的字符串
- Javascript Regex匹配字符串最后一次出现后的所有内容
- 使用RegEx获取最后一次出现