javascript - 如何根据文本查找 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>

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

找到其中包含“动态更改我”文本的那个。
分配一个 ID，如“id=theid”

我假设 nodeType 是一个，因为我更改了代码，因此我确实从一开始就分配了一个 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>

警报命令显示“1”作为节点类型。但我显然做错了什么，因为我无法改变文本。

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

编辑 1

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

score 2 · Accepted Answer

这个怎么样？

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

演示

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

另请注意，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');

演示

score 0 · Accepted Answer

问题是文本实际上是类型TEXT_NODE(3) 的单独节点，它是DT元素节点的子节点。元素上的 nodeValue 总是为空。您需要修改文本节点的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。

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

2 回答 2

Related

Reference