Question

我正在尝试制作某种伪面包屑 - 或者基于当前文件名（路径）的标题。

所以我写了一个像这样的函数：

function getPageName(){

    var pathArray = window.location.pathname.split( '/' );

    // reverse array give the last one. easier to keep track in URls
    var pathLast = pathArray.reverse()[0]; 

    return pathLast;

    }

我的标记如下（注意 - 标记不能更改/修改/修复 - 因此不能添加新类或添加ID）：

    <h3 class="page-title">

   First Path <small>Sub Path</small>

    </h3>

更改Sub Path的区域证明很容易：

var pathLast = getPageName();
jQuery("h3.page-title small").html(pathLast);

但我似乎无法找到如何定位First Path ...

我试过

jQuery("h3.page-title small").before().html(pathLast);

但是 - 当然它会改变整个h3 - 从而删除子路径。

我甚至尝试过：

var currentMenuItemx = jQuery("a[href='" + pathLast + "']").parent().parent().parent().find('span[class="title"]');
 jQuery("h3.page-title small").before(currentMenuItemx).html(pathLast);

证明同样没用。

我也尝试过：

// var title = currentMenuItemParent.get(0)+ "<small>"+pathLast+"<small>";

不适合我。

所以我的问题是如何在不影响子元素的情况下定位和更改包含其他元素的元素。

更新：

@Terwanerik方法会起作用（类似于我的上一个例子 - 但更清晰的jQUery技能）

..但是

该函数必须改为：

function getPageName（）{

    var pathArray = window.location.pathname.split( '/' );

    // reverse array give the last one. easier to keep track in URls
    var pathLast = pathArray.reverse(); // return whole array

    return pathLast;

    }

因此返回整个数组.. 否则，index.php的结果例如是（string）：

    <h3 class="page-title">

   i<small>n</small>

    </h3>

但是仍然 - 我想我真正想知道的是，是否有一些jQuery函数来处理这些情况，因为parent()和before()似乎适合这种情况.. < / p>

Answer 1

如何只更改<h3 class='page-title'>中的所有html：

jQuery("h3.page-title").html(pathLast[0]+"<small>"+pathLast[1]+"</small>");

Answer 2

您可以尝试使用contents()功能进行过滤：

$("h3").contents().filter(function(){ return this.nodeType == 3; }).first().replaceWith("Changed Path");

<强> JSFiddle

Answer 3

这是一个经典的x/y problem问题。

您不想知道如何在不影响子元素的情况下定位和更改包含其他元素的元素。

你要做的就是被告知你不应该像这样设置你的面包屑 - 这是一种糟糕的做法。相反，您应该将它们设置为一个列表，然后您可以更容易地将其定位（并通过CSS设置样式）：

<ul id="breadcrumbs">
    <li>First Path</li>
    <li>Sub Path</li>
</ul>

现在，您可以使用

定位路径的特定部分

$('#breadcrumbs').find('li')[ 3 ] // for the 4th <li>

这是一种更容易处理它的方法。

您还可以使用CSS在它们之间添加分隔符（:before选择器，content:属性和li + li选择器）更容易，更加语义化。

Answer 4

您可以定位.children()的{{1}}，然后获取h3以获取所有HTML以重新创建它们。这使您可以修改父标记的基本文本内容，而无需担心与子项有关的任何其他内容：

.outerHTML()

如果它们与纯文本节点交织在一起，您当然会丢失标签的任何上下文：

$('h3.page-title').html( 'New Page' + $('h3.page-title').children().outerHTML() );

但对于您的用例，它应该没有任何问题。

jQuery - 元素的DOM操作，不影响子元素

4 个答案: