获取已知父级内的子元素，其中包含已知的子级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>

现在让我们说我有＆＃34; p1＆＃34;变量中的div：var节点。 我所知道的是 - 我的节点var中有一个标题，这是一个id以＆＃34开头的元素;标题＆＃34;。

我怎样才能： 1）在我当前的父级内部递归搜索这个孩子。 2）仅通过其ID substr（＆＃34; title＆＃34; part）进行搜索。 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;
        }
    }
}

jsfiddle