获取子元素的已知父里面，与孩子的ID已知*部分*

Question

比方说（只是为了测试），我有这样的代码：

<div class="p1"> 
    <div class="fortest"> 
    <span id="title1"></span> 
    <span id="words1"></span> 
    </div> 
</div> 
<div class="p2"> 
    <span id="title2"></span> 
    <span id="words2"></span> 
</div> 

现在让我们说我有“P1” DIV中变量：var节点。 我所知道的是 - 我的节点var中有一个标题，它是一个id为“title”的元素。

我该怎么做： 1）在我目前的父母内部递归搜索这个孩子。 2）只能通过它的ID substr（“标题”部分）进行搜索。 3）完成功能，当我找到它。

请给我一个生动的例子，如果你可以:) 谢谢！

Answer 1

您可以使用querySelector和css 'starts-with' attribute selector此：

var p1 = document.querySelector('.p1'), 
    titleChild = p1.querySelector('[id^="title"]'); 

Answer 2

这是你如何能做到这一点递归，如果由于某种原因你不想使用queryselector。

function getChildByPrefix(parent, prefix) { 
    var i, child; 
    if (parent.id.substr(0, prefix.length) == prefix) { 
     return parent; 
    } 
    for (i = 0; i < parent.children.length; i++) { 
     child = getChildByPrefix(parent.children[i], prefix); 
     if (child) { 
      return child; 
     } 
    } 
}