如何在jquery中访问div内部的标签

Question

我想在div中找到具有特定id的标签＆＃34; my_text＆＃34;和 检查每个标签内的文本是否与＆＃34;随机文本＆＃34;匹配。 我怎样才能做到这一点？

<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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;