javascript - 获取所有父级并将它们存储在字符串中

Question

<form class="register">
    <div class="form-group">
        <input type="submit" value="Signup" class="btn btn-submit" />
    </div>
    <div class="form-group needAccount" id="req_val">
        <a href="#" class="toggleForms">Login from here</a>
    </div>
</form>

现在我想遍历这个表单并获取最后一个 div#req_val 的所有父级，因此输出应该是一个字符串，即

form.register div.form-group.needAccount#req_val

Answer 1

您可以使用 .parents() 遍历父级并自行生成。请参阅下面的示例实现:

// returns <tag-name>[.<class1>[.<class2>] ...][#<id>] for the passed element
function getSelector(_elem) {
    var parts = [_elem.tagName].concat(_elem.className.split(/\s+/).map(function(_class) {
        return (_class ? '.' + _class : '');
    }));
    _elem.id && parts.push('#' + _elem.id);
    return parts.join('');
}

var elem = $('#req_val'), parents = elem.parents(), str = [];
parents.each(function() { // add parents
   str.unshift(getSelector(this)); // unshift since parents() gives you the nearest parent first
});
str.push(getSelector($('#req_val')[0])); // add self
str = str.join(' '); // join with space

console.log(str);

演示:http://jsfiddle.net/wu41vwuf/