CODEWITHSUNDEEP
javascriptjqueryhtml
Za7pi
Za7pi

Reputation: 1418

Get value of text inside each div depending text

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.

Upvotes: 4

Views: 604

Answers (7)

Devima
Devima

Reputation: 1566

I found a solution but it seems excessively verbose.
I posted a question in the community(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 comment)

<!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.com/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.

Upvotes: 0

Devima
Devima

Reputation: 1566

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

Upvotes: 1

Venkadeshwaran
Venkadeshwaran

Reputation: 26

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

Upvotes: 0

tutankhamun
tutankhamun

Reputation: 920

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.net/jF6KU/

Upvotes: 2

enhzflep
enhzflep

Reputation: 13089

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!";
        }
    }

Upvotes: 0

Jalpesh Vadgama
Jalpesh Vadgama

Reputation: 14216

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) {

    }
})

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 7

Related Questions