Question

如何定位所有“第3级”和“第4级”链接，并在为链接显示的文本之前输入短划线？

例如，从下面的代码中，任何说“Level 3 Page 1”或“Level 4 Page 1”的内容现在都会说“ - Level 3 Page 1”

这是Wordpress生成的（所以我不能只是在链接中输入一个破折号）：

<ul>
    <li class="top-level"><a href="#">Extra Curriculum</a></li>
    <li class="page_item page-item-42"><a href="#">Level 2 Page 1</a></li>
</ul>
<ul class='children'>
    <li class="page_item page-item-51">
        <a href="#">Level 3 Page 1</a>
        <ul class='children'>
            <li class="page_item page-item-56"><a href="#/">Level 4 Page 1</a></li>
            <li class="page_item page-item-57"><a href="#">Level 4 Page 2</a></li>
            <li class="page_item page-item-59"><a href="#">Level 4 Page 3</a></li>
        </ul>
    </li>
    <li class="page_item page-item-52"><a href="#">Level 3 Page 2</a></li>
    <li class="page_item page-item-54"><a href="#">Level 3 Page 3</a></li>
</ul>
<ul>
    <li class="page_item page-item-44"><a href="#">Level 2 Page 2</a></li>
    <li class="page_item page-item-47"><a href="#">Level 2 Page 3</a></li>
</ul>

我猜这是jquery的工作？

Answer 1

$("a:contains(Level 3),a:contains(Level 4)").each(function() {
    $(this).text("- "+$(this).text());
});

Answer 2

类似

li.level3, li.level4
{
   background-position: left;
   background-image : "url(dash.jpeg)";
   background-repeat: no-repeat;
   padding-left:10px;
}

Answer 3

希望这个帮助

$('ul .children a').each(function() {
$(this).text("- "+$(this).text());
});

Answer 4

jQuery代码：

$('a:contains(Level 3), a:contains(Level 4)').prepend('-');

链接至： JSFIDDLE

Answer 5

您可以使用:before伪元素：

.children > li:before {
  content: "-";
}

定位特定列表项并通过jquery输入文本？

5 个答案: