Use JQuery to target unwrapped text inside a div
- by Chris
I'm trying to find a way to wrap just the inner text of an element, I don't want to target any other inner dom elements. For example.
<ul>
<li class="this-one">
this is my item
<ul>
<li>
this is a sub element
</li>
</ul>
</li>
</ul>
I want to use jQuery to do this.
<ul>
<li class="this-one">
<div class="tree-item-text">this is my item</div>
<ul>
<li>
<div class="tree-item-text">this is a sub element</div>
</li>
</ul>
</li>
</ul>
A little background is I need to make an in-house tree structure ui element, So I'm using the UL structure to represent this. But I don't want developers to have to do any special formatting to use the widget.
update: I just wanted to add the purpose of this is I want to add a click listener to be able to expand the elements under the li, However, since those elements are within the li the click listener will activate even when clicking on the children, So I want to attach it to the text instead, to do this the text needs to be targetable, which is why I want to wrap it in a div of it's own.
So far I've come up with wrapping all the inner elements of the li in a div and then moving all inner dom elements back to the original parent. But this code is pretty heavy for something that might be much simpler and not require so much DOM manipulation.
EDIT: Want to share the first pseudo alternative I came up with but I think it is very tasking for what I want to accomplish.
var innerTextThing = $("ul.tree ul").parents("li").wrapInner("<div class='tree-node-text'>");
$(innerTextThing.find(".tree-node-text")).each(function(){
$(this).after($(this).children("ul"));
});
Answered:
I ended up doing the following, FYI i only have to worry about FF and IE compatibility so it's untested in other browsers.
//this will wrap all li textNodes in a div so we can target them.
$(that).find("li").contents()
.filter(function () {
return this.nodeType == 3;
}).each(function () {
if (
//these are for IE and FF compatibility
(this.textContent != undefined && this.textContent.trim() != "")
||
(this.innerText != undefined && this.innerText.trim() != "")
) {
$(this).wrap("<div class='tree-node-text'>");
}
});
