如何在jquery中的div内访问带有id的标签

Question

我想访问div“ my_text”内具有特定ID的标签，并检查每个标签内的文本是否与“随机文本”匹配。 我怎样才能做到这一点？

<div id="my_text">
<div>
<lable id="0">sample text one</lable> 
<button id="0" type="button">×</button><br>
</div>
<div>
<lable id="1">sample text two</lable>
<button id="1" type="button">×</button><br>
</div>
</div>

/ *这是我的jquery代码* /

if(($("#my_text > div > lable#id[i]").text() != "random text"))
 {
  $("#my_text").append('<div><lable id='+i+' >'+el.text+'</lable>'+'<button id='+i+' type="button">&times;</button><br></div>');
  }

提前致谢！！

Answer 1

我想您打算做的是遍历与选择器匹配的DOM节点集合，并检查其中的任何标签是否包含字符串random text 。 如果没有，则要附加一个新元素。 因此，该策略应如下：

1. 生成一个包含所有标签文本节点的数组。 这是使用.map().get() ，该方法返回一个数组。
2. 检查返回的数组是否包含random text
3. 如果不满足此条件，请在末尾添加新元素。 新元素的ID仅由数组的长度确定

这是一个概念验证示例：

 $(function() { // Retrieve all label text var labels = $('#my_text > div > label').map(function() { return $(this).text(); }).get(); // Check if labels contain the string `random text` // If it is not found, append new component if(labels.indexOf('random text') < 0) { $('#my_text').append('<div><label id='+labels.length+' >label</label>'+'<button id='+labels.length+' type="button">&times;</button><br></div>'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="my_text"> <div> <label id="0">sample text one</label> <button id="0" type="button">×</button> <br> </div> <div> <label id="1">sample text two</label> <button id="1" type="button">×</button> <br> </div> </div> 

请注意， <lable>不是有效的HTML元素。 我想您打算改用<label>吗？

---

更新：基于RegEx的匹配

如果打算对标签文本执行基于正则表达式的匹配，则过程类似，但是需要进行一些调整。 由于我们无法使用.indexOf()进行基于正则表达式的匹配，因此必须在迭代级别执行。 一个例子如下：

 $(function() { // Flag for regex match var match = false, pattern = /random text/gi; // Evaluate all label text var $labels = $('#my_text > div > label'); $labels.each(function() { var regex = $(this).text().search(pattern); // Once a match is found, we toggle match to true // And return false to break out of the loop if (regex !== -1) { match = true; return false; } }); // Check if any of the labels matches the regex pattern // If it is not found, append new component if (!match) { $('#my_text').append('<div><label id=' + $labels.length + ' >label</label>' + '<button id=' + $labels.length + ' type="button">&times;</button><br></div>'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="my_text"> <div> <label id="0">sample text one</label> <button id="0" type="button">×</button> <br> </div> <div> <label id="1">sample text two</label> <button id="1" type="button">×</button> <br> </div> </div> 

Answer 2

使用.trim和.find

 $(function(){ var texting = "sample text one"; if($('#my_text').find('label#0').text().trim() == texting) { console.log("Same"); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="my_text"> <div> <label id="0">sample text one</label> <button id="0" type="button">×</button><br> </div> <div> <label id="1">sample text two</label> <button id="1" type="button">×</button><br> </div> </div>