如何根据文本查找HTML元素，然后分配ID

Question

我有以下测试代码：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<DT>change me dynamically</DT>
<DD>
<input class=" text" type="text"  name="contact_details"  value=""  id="contact_details" >
<P CLASS="descr"></P>
</DD>

<script type="text/javascript">
 $(document).ready(function() {
    //loop thorugh all controls.  find all labels (nodeType 1.  Find the "change my dynamically" text.  assign ID to control for use later.)
        $("*").contents().each(function() {
            if(this.nodeType == 1)
                this.nodeValue = this.nodeValue.replace("change me dynamically", "bingo!  you found me!");
                $(this).attr("id","theid");
            alert(this.nodeValue);
        });
 });

$('#theid').click(function() {
    alert('you did it!');
});
 </script>

这是我正在尝试做的事情：

1. 找到其中包含“动态更改我”文本的文件。
2. 分配像“id = theid”这样的ID

我假设nodeType为1，因为我更改了代码，所以我确实从一开始就分配了一个ID，然后绑定了一个onclick事件......就像这样：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<DT id="theid">change me dynamically</DT>
<DD>
<input class=" text" type="text"  name="contact_details"  value=""  id="contact_details" >
<P CLASS="descr"></P>
</DD>
<script type="text/javascript">
 $(document).ready(function() {
    //loop thorugh all controls.  find all labels (nodeType 1.  Find the "change my dynamically" text.  assign ID to control for use later.)
        $("*").contents().each(function() {
            if(this.nodeType == 1)
                this.nodeValue = this.nodeValue.replace("change me dynamically", "bingo!  you found me!");
                $(this).attr("id","theid");
            alert(this.nodeValue);
        });
 });

$('#theid').click(function() {
    alert(this.nodeType);
});
 </script>

alert命令显示“1”作为nodeType。 但我显然做错了，因为我无法改变文本。

另一条评论 - 我知道我可以找到所有项目而不是获取所有内容...但我将使用类似的逻辑用于其他元素类型，而不仅仅是s。 谢谢。

编辑1

有比我给你看到的HTML更多的HTML ...这里是完整的HTML：

<div id="page">
    <div id="header">
        <div class="leader">
            <a href="#Content" class="hide">[Skip to main content]</a>
        </div>
        <div id="logo">
            <div class="leader"></div>
            <a href="/">home</a> | 
            <a href="">about</a>
            </p></span>
        <div class="tailer"></div>
    </div>  <!-- header -->

    <div id="main">
        <div class="leader">
        </div>

        <div id="nav">
            <div class="leader">
                <h3 class="hide">[Main menu]</h3>
            </div>

            <ul>
                <li>Applications
                    <ul>
                        <li class='selected'><a class='selected' href="">Voicemail</a></li>
                    </ul>
                </li>
            </ul>

            <div class="tailer">
            </div>
        </div>  <!-- nav -->

        <a name="Content"></a>

<div id="content">
    <div class="leader">
    </div>



<form action="" method="POST">
<input class=" hidden" type="hidden"  name="redir"  value="" >
<input class=" hidden" type="hidden"  name="id"  value=""  readonly="true" >
<DT>Mobile Number</DT>
<DD>
<input class="testclass text" type="text"  name="mobile_number"  value="5371"  id="mobile_number"  readonly="false" >
</DD>
<DT>Rule Name</DT>
<DD>
<input class=" text" type="text"  name="rulename"  value="" >
<P CLASS="descr">Give this rule a name</P>
</DD>
<DT>Rule Type:</DT>
<DD>
<select name="ruletypes"  id="ruletypes" ><option  selected value="" ></option></select>
<P CLASS="descr"></P>
</DD>
<DT>When to use this rule</DT>
<DD>
<select name="rule_condition"  id="rule_condition" ><option  selected value="" ></option></select>
<P CLASS="descr"></P>
</DD>
<DT>What&#39;s the person&#39;s number?</DT>
<DD>
<input class=" text" type="text"  name="caller_id_number"  value=""  id="caller_id_number" >
<P CLASS="descr"></P>
</DD>
<DT>Start Time</DT>
<DD>
<input class=" text" type="text"  name="start_time"  value=""  id="start_time" >
<P CLASS="descr"></P>
</DD>
<DT>End Time</DT>
<DD>
<input class=" text" type="text"  name="end_time"  value=""  id="end_time" >
<P CLASS="descr"></P>
</DD>
<input class=" hidden" type="hidden"  name="user_id"  value="1"  readonly="true" >
<DT>Contact Type</DT>
<DD>
<select name="contact_types"  id="contact_types" ><option  selected value="" ></option></select>
<P CLASS="descr"></P>
</DD>
<DT>change me dynamically</DT>
<DD>
<input class=" text" type="text"  name="contact_details"  value=""  id="contact_details" >
<P CLASS="descr"></P>
</DD>
<DT> Order</DT>

<DT></DT><DD><input class="submit" type="submit" name="submit" value="Create Rule">
</DD>
</FORM></DL>
    <div class="tailer">
    </div>
</div>  <!-- content -->

    </div> <!-- main -->

    <div id="footer">
        <div class="leader">
        </div>
        <div class="tailer">
        </div>
    </div> <!-- footer -->
</div> <!-- page -->

Answer 1

这个怎么样？

$('body :contains("change me dynamically")').text(function(_, text){
    return text.replace(/change me dynamically/, "bingo!  you found me!");
}).attr('id', 'theId');

演示

使用：contains来选择具有特定文本的元素，然后使用.text()回调来返回修改后的文本。

另请注意，如果有多个elemens具有相同的上下文，则将id指定为同一个，您将最终创建具有重复ID的html。

此外，您确保将click事件绑定放在document.ready并且在此逻辑之后，以便事件正确绑定到具有该id的元素。

编辑

根据您的更新：

$('body :contains("change me dynamically")').contents().each(function () {
    var exp = /change me dynamically/;
    if (this.nodeValue && exp.test(this.nodeValue)) {
        var $parent = $(this).parent().attr('id', 'theId');
        $parent.text(function(_, text){
           return  text.replace(exp, "bingo!  you found me!");
        }); 
    }
});

演示

如果你只有一个实例（假设你正在添加id）

var exp = /change me dynamically/;
$('body :contains("change me dynamically")').last().text(function (_, text) {
    return text.replace(exp, "bingo!  you found me!");
}).attr('id', 'theId');

演示

Answer 2

问题是文本实际上是TEXT_NODE （3）类型的单独节点，它是DT元素节点的子节点。 元素上的nodeValue始终为null。 您需要修改文本节点的nodeValue。

如果你真的想以这种方式实现代码，我建议寻找TEXT_NODE ，检查它是否包含你想要匹配的文本，替换文本，然后更新父节点的id。

if (this.nodeType == this.TEXT_NODE) {
  if (this.nodeValue.indexOf("change me dynamically") != -1) {
    if (this.parentNode.tagName != 'SCRIPT') {
      this.nodeValue = this.nodeValue.replace("change me dynamically", 
        "bingo!  you found me!");
      $(this.parentNode).attr("id","theid");
      console.log(this.parentNode.tagName);
    }
  }
}

我还添加了一个检查，以确保如果脚本是内联的，则不要尝试匹配SCRIPT标记内的文本。

另请注意，如果要在$('#theid')节点上设置单击处理程序，则应在$(document).ready函数内执行此操作。 否则，当您尝试设置处理程序时， $(document).ready函数将不会运行，因此尚未分配id。