javascript - 将 css 样式应用于页码

Question

我需要使用 javascript 为数字 2 应用一种 css 样式。我如何使用来自以下 html 的 javascript 执行此操作。

<tfoot>
<tr class="pp-pagenumber">
    <td colspan="1">
        <a data-swhglnk="true" href="#">&lt;</a>
        <a data-swhglnk="true" href="#">1</a>
        2
        <a data-swhglnk="true" href="#">3</a>
        <a data-swhglnk="true" href="#">4</a>
        <a data-swhglnk="true" href="#">&gt;</a>
    </td>
</tr>
</tfoot>

最后会变成下图的样子

根据 Govan 的建议，我将其更改为纯 CSS。但现在它看起来像

Answer 1

由于您要设置样式的数字 2 不在任何标签中，因此很难设置该元素的样式。您可以过滤类型为 3 的节点，表示文本节点并将其包装在具有指定类名的标签中。然后您可以使用该类名称为该元素设置样式

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<table>
<tfoot>
<tr class="pp-pagenumber">
    <td colspan="1">
        <a data-swhglnk="true" href="#">&lt;</a>
        <a data-swhglnk="true" href="#">1</a>
        2
        <a data-swhglnk="true" href="#">3</a>
        <a data-swhglnk="true" href="#">4</a>
        <a data-swhglnk="true" href="#">&gt;</a>
    </td>
</tr>
</tfoot>
</table>

<script>
$(document).ready(function(){

    $('tr.pp-pagenumber td').contents().filter(function() {
        return this.nodeType === 3;
    }).wrap('<a class="currentPage"></a>');


     /*You can remove the blank nodes if exists by */
    $(".currentPage").each(function(){
        if($(this).html().trim()=="")
            $(this).remove();
    });

});
</script>

<style>

.currentPage {

    background-color : green ; 
}

</style>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

	<table>
	<tfoot>
	<tr class="pp-pagenumber">
		<td colspan="1">
			<a data-swhglnk="true" href="#">&lt;</a>
			<a data-swhglnk="true" href="#">1</a>
			2
			<a data-swhglnk="true" href="#">3</a>
			<a data-swhglnk="true" href="#">4</a>
			<a data-swhglnk="true" href="#">&gt;</a>	
		</td>
	</tr>
	</tfoot>
	</table>

	<script>
	$(document).ready(function(){
		
		$('tr.pp-pagenumber td').contents().filter(function() {
			return this.nodeType === 3;
		}).wrap('<a class="currentPage"></a>');
		
				$(".currentPage").each(function(){
			if($(this).html().trim()=="")
				$(this).remove();
		});


		
	});
	</script>

	<style>

	.currentPage {
		
		background-color : green ; 
	}

	</style>