CODEWITHSUNDEEP
jquery
FlyingCat
FlyingCat

Reputation: 14250

How to change contents in parent div from child div?

I am trying to modify the text in the parent div from child div without changeing the child div contents.

I have 

<div id='testDiv'>
    this is the test parent div
    <div id='child1'>
         lots of contents and child div
         ...................
    </div>
    more div/child div and contents...

</div>

in my jquery

$('child1 div a').click(function(){
    $('#testDiv').text('new text');  //this will remove the child1 div and all the contents inside testDiv
    //I want to replace 'this is the test parent div' text to 'newt text' 
})

Are there anyways to get this done? Thanks a lot!

Upvotes: 0

Views: 939

Answers (4)

adeneo
adeneo

Reputation: 318182

If you wrap the text in a span, it would be easier to change it:

$('#testDiv').contents()
             .filter(function(){return this.nodeType === 3})
             .wrap($('<span />',{'class':'test'}));

$('.test').text('new text');

FIDDLE

You could ofcourse unwrap the textnode once it's changed if the span element causes some sort of problem? ​

Upvotes: 1

Ram
Ram

Reputation: 144659

You can use firstChild property:

​document.getElementById('testDiv').firstChild.nodeValue = 'new text'​​;

http://jsfiddle.net/vstHS/

Upvotes: 2

Sushanth --
Sushanth --

Reputation: 55740

Try using a mix of .filter() and .contents()

$('#child1 div a').click(function() {
    $('#testDiv').contents().filter(function() {
        if (this.nodeType != 1 && this.data.trim() != '') {
            return this.data = 'New Text';
        }
        else {
            return this
        };
    });
})​

Check Fiddle

Upvotes: 2

Nick
Nick

Reputation: 6588

You just need to contain the portion that you want to change into another div and target that directly...

<div id='testDiv'>
    <div id='changeMe'>
        this is the test parent div
    </div>
    <div id='child1'>
         lots of contents and child div
         ...................
    </div>
    more div/child div and contents...
</div>

The jquery:

$('child1 div a').click(function(){
    $('#changeMe').text('new text');
})

Upvotes: -2

Related Questions