I have got this structure:

<table id="thetable">
    <tr>
        <td>
            <div>
                <div>some text</div>
                <div>
                    <div></div>
                    <div>(This text is good)</div>
                    <div>some text2</div>
                    <div>some text3</div>
                </div>
            </div>
        </td>
    <tr>
    </tr>
        <td>
            <div>
                <div>some text</div>
                <div>
                    <div></div>
                    <div>(This text is good)</div>
                    <div>some text2</div>
                    <div>some text3</div>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <div>some text</div>
                <div>
                    <div></div>
                    <div>(This text is good)</div>
                    <div>some text2</div>
                    <div>some text3</div>
                </div>
            </div>
        </td>
    </tr>
</table>

I want to take the text inside the div, but only the text with this word: good. and replace. So I am doing this:

$("#thetable div:contains('good')").each(function () {
        try {
            console.log($(this).text());
            console.log("------------------------------");
        } catch (ex) {

        }
    })

But the console.log is saying to me that each log is taking not only the text of the div with good text but also the other two. It is printing:

(This text is good)some text2some text3

So I want to take only the div with text good and replace this text with another text.

Thanks!

Basically: I want to get the div where I have got the word "good"(or any word I want), and in this div insert/replace the text. Find in all document or, specifically, in a part of the document, like this example: in a table.

I have got this structure:

<table id="thetable">
    <tr>
        <td>
            <div>
                <div>some text</div>
                <div>
                    <div></div>
                    <div>(This text is good)</div>
                    <div>some text2</div>
                    <div>some text3</div>
                </div>
            </div>
        </td>
    <tr>
    </tr>
        <td>
            <div>
                <div>some text</div>
                <div>
                    <div></div>
                    <div>(This text is good)</div>
                    <div>some text2</div>
                    <div>some text3</div>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <div>some text</div>
                <div>
                    <div></div>
                    <div>(This text is good)</div>
                    <div>some text2</div>
                    <div>some text3</div>
                </div>
            </div>
        </td>
    </tr>
</table>

I want to take the text inside the div, but only the text with this word: good. and replace. So I am doing this:

$("#thetable div:contains('good')").each(function () {
        try {
            console.log($(this).text());
            console.log("------------------------------");
        } catch (ex) {

        }
    })

But the console.log is saying to me that each log is taking not only the text of the div with good text but also the other two. It is printing:

(This text is good)some text2some text3

So I want to take only the div with text good and replace this text with another text.

Thanks!

Basically: I want to get the div where I have got the word "good"(or any word I want), and in this div insert/replace the text. Find in all document or, specifically, in a part of the document, like this example: in a table.

• javascript
• jquery
• html

Share Improve this question Follow edited Apr 9, 2014 at 10:24 Starscream1984 3,06211 gold badge2121 silver badges2727 bronze badges asked Apr 9, 2014 at 10:13 Za7piZa7pi 1,41888 gold badges2323 silver badges3434 bronze badges 1

• Whilst formatting your html in an edit I noticed that your first <tr> is not closed properly - I don't know if this is going to have any effect on your selectors – Starscream1984 Commented Apr 9, 2014 at 10:24

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 7

Because you have a div which contains those 3 divs

one possible solution is to fetch only the end elements like

$("#thetable div:contains('good'):not(:has(*))").each(function () {
})

Demo: Fiddle

This expression select all "div" include parents. You may add condition.

$("#thetable div:contains('good')").each(function () {
        try {
            if ($('div', this).length < 1) { // test child presence
                console.log($(this).text());
                console.log("------------------------------");
            }
        } catch (ex) {

        }
    })

http://jsfiddle/jF6KU/

For me the Arun P Johny code is the best solution
So i try to explain to you some concepts
Arun P Johny code not select the last element, but select items that do not have children.
His code is extremely elegant and performant the only flaw is that it does not work if you put in html an alement like this

<div>(This text is good)<div>(This text is good)</div></div>

because in this case the code would select only the innermost element

try something like this.

$("#thetable div").each(function () {
    try {
        var val = $(this).text();

       if ( val.indexOf('good') !== -1 )
       {            
          console.log($(this).text());
          console.log("------------------------------");
       }
    } catch (ex) {

    }
})

I believe, a faster (though admittedly, less flexible) approach would be to use vanilla JS. I should probably test with JsPerf

This will give you 3 hits on the html structure you've listed:

    var containers = document.querySelectorAll('#thetable div div div');
    var i, n = containers.length;

    for (i=0; i<n; i++)
    {
        if (containers[i].innerText.indexOf('good') !== -1)
        {
            console.log("found instance of 'good'");
            containers[i].title = "Gotcha!";
        }
    }

Simple you can use the jquery closest function to get the nearest div. try the below code

$("#thetable tr div div ").find("div:contains('good')").closest('div')

Check this jsfiddle

I found a solution but it seems excessively verbose.
I posted a question in the munity(here) but so far no one responded correctly.
However i leave you my code that lets you get an element that contains both the string and another div that containing the string (look at the the ment)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table id="thetable">
<tr>
<td>
<div>
    <!--div that contains the string and a div with the string-->
    <div>(This text is good)<div>(This text is good)</div></div>
    <div>
        <div></div>
        <div>(This text is good)</div>
        <div>some text1</div>
        <div>some text2</div>
    </div>
</div>
</td>
<tr>
</tr>
<td>
<div>
    <div>some text</div>
    <div>
        <div></div>
        <div>(This text is good)</div>
        <div>some text1</div>
        <div>some text2</div>
    </div>
</div>
</td>
</tr>
<tr>
<td>
<div>
    <div>some text</div>
    <div>
        <div></div>
        <div>(This text is good)</div>
        <div>some text1</div>
        <div>some text2</div>
    </div>
</div>
</td>
</tr>
</table>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var len =$('#thetable div').length
    for(i=1;i<len;i++){
        $('div:eq('+i+')').contents().addClass('passed').filter(function () {
         return $(this).text()==='(This text is good)' && $.trim(this.nodeValue).length
       }).replaceWith('FIND');
    }

    for(i=0;i<len;i++){
        var classx=$('div:eq('+i+')').attr('class')
        if(classx===undefined){
            var ca=$('div:eq('+i+')').contents()[0].nodeValue
            if (ca.indexOf('good') > 0) {
               $('div:eq('+i+')').contents()[0].nodeValue='FIND'
           }
        }
    }
})
</script>
</body>
</html>

I hope this solution can help you, by.