为页面编号应用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

纯CSS修复：

试试这个，让我知道它是否有效。

fiddle

a::after {
    content: "*";
    background: white;
    color: white;
}

a::before {
    content: "*";
    background: white;
    color: white;
}

a {
    background: grey;
    margin-right: -4px;
    margin-left: -4px;
}

td {
    background: green;
    display: inline;
}

Answer 2

为什么你需要JS？ 纯CSS应该可以解决问题：

tr.pp-pagenumber td {color : red;}
tr.pp-pagenumber td a {color : black;}

Answer 3

由于要设置样式的数字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>

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

试着看看这个： JavaScript wrapping unwrapped plain text

也许这可以帮助你，有解决方案你怎么能包装这个简单的＆＃34; 2＆＃34;使用JS。

然后你可以根据需要设计它。

Answer 5

为数字添加一个onclick函数，在onclick函数中只需向该按钮添加一个类。写下你曾经写过的css代码。

我认为这对你有用。

controllers