Question

嗨，我有一个非常独特的要求。我需要从div中找到一个没有被任何标签包围的文本，然后一旦我拥有它，我需要用div包围它并给它一个CSS类。

例如：

<div class="pagingCss" id="footer">
    <a href="/XXX/Home/Results?page=1">1</a>        
    <a href="/XXX/Home/Results?page=6">6</a>
    7 
    <a href="/XXX/Home/Results?page=8">8</a>        
</div>

所以我想让我的代码做的就是找到这个数字7（在这种情况下），然后用span标签和类似的类围绕它：

<div class="pagingCss" id="footer">
    <a href="/XXX/Home/Results?page=1">1</a>        
    <a href="/XXX/Home/Results?page=6">6</a>
    <span class="someClass">7</span>
    <a href="/XXX/Home/Results?page=8">8</a>        
</div>

我正在做的所有这些都是因为我只是无法为标签减少文本的间距，你可以在附带的屏幕截图中看到

链接到屏幕截图：http://yassershaikh.com/wp-content/uploads/2012/02/paging.png

Answer 1

<script type="text/javascript">
function load(){
var footer = document.getElementById("footer");
var toFind= "7"
for(i=0;i<footer.childNodes.length;i++)
if(footer.childNodes[i].textContent == toFind ){
var span = document.createElement("span")
span.setAttribute("class","someClass");
span.appendChild(document.createTextNode(toFind));
footer.replaceChild( span , footer.childNodes[i] )
break;
}
}
</script>
<div class="pagingCss" id="footer">
<a href="/XXX/Home/Results?page=1">1</a>        
<a href="/XXX/Home/Results?page=6">6</a>7<a href="/XXX/Home/Results?page=8">8</a>        
</div>
<input type=button value="click" onclick="load()">

对它进行了测试..让孩子"7"受到跨越..

Answer 2

您需要使用

:not([href]){
 color:red;
}

http://jsfiddle.net/mfmHz/

Answer 3

你可以试试这个

var footer = document.getElementById("footer");
var nodes=footer.childNodes;
for(i=0;i<nodes.length;i++)
{
    if(parseInt(nodes[i].nodeValue)>0) 
    {
        var span = document.createElement("span")
        span.setAttribute("class","active");
        span.appendChild(document.createTextNode(nodes[i].nodeValue));
        footer.replaceChild(span , nodes[i]);
    }
}

这是一个小提琴link。

查找未被任何HTML标记包围的文本

3 个答案: