Question

我有这个结构：

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

我想把文本放在div中，但只有带有这个词的文本：good。并替换。所以我这样做：

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

        }
    })

但是console.log告诉我，每个日志不仅包含具有良好文本的div的文本，还包括其他两个。正在印刷：

(This text is good)some text2some text3

所以我想只使用带有文本的div，并将此文本替换为另一个文本。

谢谢！

基本上：我想得到div，其中我有“好”（或任何我想要的单词），并在此div中插入/替换文本。在所有文档中查找，或者特别是在文档的一部分中查找，例如：在表格中。

Answer 1

因为你有一个包含那3个div的div

一种可能的解决方案是仅获取像

这样的结束元素

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

演示：Fiddle

Answer 2

此表达式选择所有“div”包含父项。你可以添加条件。

$("#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/

Answer 3

对我来说，Arun P Johny代码是最好的解决方案所以我试着向你解释一些概念 Arun P Johny代码没有选择最后一个元素，而是选择没有子元素的项目。
他的代码非常优雅和高性能唯一的缺点是，如果你输入像这样的HTML，它就不起作用

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

因为在这种情况下代码只会选择最里面的元素

Answer 4

尝试这样的事情。

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

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

    }
})

Answer 5

我相信，使用vanilla JS的方法更快（虽然不可否认，灵活性更低）。我应该用JsPerf测试

这将为您列出的html结构提供3次点击：

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

Answer 6

很简单，您可以使用jquery最近函数来获取最近的div。试试下面的代码

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

检查一下 jsfiddle

Answer 7

我找到了一个解决方案，但似乎过于冗长我在社区发布了一个问题（here），但到目前为止还没有人正确回答但是我留下了我的代码，让你得到一个包含字符串和另一个包含字符串的div的元素（查看注释）

<!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>

我希望这个解决方案可以帮助你。

获取每个div内的文本值取决于文本

7 个答案: