Question

如何创建一个函数来验证div类下是否存在“ span”元素？

例如：

<div class="myDiv">

</div

在<span>下没有.myDiv。因此，验证跨度是否存在。如果存在，则在console.log中显示“ span存在”，如果不存在，则显示“ span不存在”。

谢谢！

Answer 1

这是您要找的东西吗？

 if( $('.myDiv').has("span"))        
    {
         console.log("span exists");
    } else {
         console.log("span does not exist");
    }

Answer 2

您可以使用choco属性进行检查

.length

现在，您可以使用此功能检查function spanExists(){ return $(".myDiv span").length() > 0; }下是否存在span。

Answer 3

想展示些东西吗？如果存在跨度，则显示一个字符串，如果不存在跨度，则显示另一个字符串。

let item = UIBarButtonItem(title: "Setting", style: .done, target: self, action: #selector(setting))

 navigationItem.rightBarButtonItem = item

// then do your action in function setting 

@objc
  final func setting() {
    print("Your work here.")
  }

$(function(){
  if($('.myDiv span').length > 0){
      $('#status').text('One or more spans exist.');
  }else{
      $('#status').text("No span exists.");
  }
});

Answer 4

您可以遍历所有div并检查找到了多少个子跨度：

$("div").each(function(){
  console.log("Div "+$(this).attr("class")+" has "+$(this).find("span").length+" span(s)");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="myDiv1">
  <a href="#">Link</a>
</div>

<div class="myDiv2">
  <span>Span</span>
</div>

<div class="myDiv3">
  <h1>Header</h1>
</div>

Answer 5

所有答案都给出了使用jQuery的解决方案，所以我说了为什么不只使用纯JavaScript来解决问题，因为我认为此类任务实际上并不需要jQuery的力量。 / p>

尝试一下：

制作一个函数来接收元素或代表该元素ID的字符串，然后查看该元素是否确实包含跨度。

function doesContainSpan(element) {
    var el = (typeof element == 'string') ? document.getElementById(element):element, elementChildren = el.children, l = elementChildren.length, i = 0;
    for(; i < l; i++) {
        if(elementChildren[i].nodeName.toLowerCase() === 'span' {
            console.log('the element with ID = ' + el.id + ' has a span tag');
            return true;
        }
    }
    console.log('the element with ID = ' + el.id + ' doesn't have a span tag');
    return false;
}

您可以像这样说的，将其发送给类为.myDiv的div：

var el = document.getElementsByClassName('myDiv')[0];
doesContainSpan(el);

发送字符串作为参数时，可以使函数使用给定的class而不是ID来获取元素，这里它将表示class而不是{{ 1}}，方法如下：

ID

对此：

el = (typeof element == 'string') ? document.getElementById(element):element

Answer 6

我创建了两个替代方法以使其清晰明了：

// quick answer
console.log(($(".myDiv1 span").length == 0 ? 'does not ' : '') + 'exists')
console.log(($(".myDiv2 span").length == 0 ? 'does not ' : '') + 'exists')

// slow but more detailed
function checkSpanExists(element) {
    let exists = ($(element+" span").length == 0)
    if (exists) {
        console.log('element '+element+' does not contain span');
    } else {
        console.log('element '+element+' contains span')
    }
}

checkSpanExists('.myDiv1');
checkSpanExists('.myDiv2');

<!doctype html>
  <html>
  <head>
      <meta charset="utf-8">
      <title>Mastering Javascript</title>
      <script
          src="https://code.jquery.com/jquery-3.3.1.js"
          integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
          crossorigin="anonymous"></script>
  </head>
  <body>
      <div class="myDiv1">

      </div>
      <div class="myDiv2">
          <span>mastering javascript</span>
      </div>
      <script>

      </script>
  </body>
  </html>

如果您仍然需要帮助，请随时寻求改进...

jQuery函数，如果跨度存在

6 个答案: