Search code examples
jquerydomdom-traversal

jQuery - DOM manipulation of element without affecting subelemnt

I am trying to make some kind of a pseudo-breadcrumb - or a title that is based on the name of the current file ( path ) .

So I wrote a function like so :

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;

    }

My markup is as followed ( note - the markup can not be changed / amended / fixed - so no new classes spans or IDs can be added ) :

    <h3 class="page-title">

   First Path <small>Sub Path</small>

    </h3>

Changing the area of Sub Path proves easy :

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

But I can not seem to find how to target the First Path ...

I tried

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

But - of course it changes the whole h3 - thus deleting the subpath.

I even tried :

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

which proves equally useless .

I also tried along the lines of :

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

Not working for me.

so my question is how to target and change an element that has another element inside without affecting the subelement.

UPDATE :

@Terwanerik approach would work ( similar to my last example - but sharper jQUery skills )

..BUT

The function would have to change a bit to :

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;

    }

Thus returning the whole array .. Otherwise , the result for index.php for example is ( string) :

    <h3 class="page-title">

   i<small>n</small>

    </h3>

But still - I guess what I really wanted to know is if there is some jQuery function to handle those situations in general , since parent() nor before() seems to be right for this case ..

Solution

  • How about just changing all the html in the <h3 class='page-title'> like so:

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