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

Get all parent and store them in string

本文关键字：存储 字符串 获取      更新时间：2023-09-26
<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
您可以使用

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

您可以使用

parents()或.parentsUntil()（如果您需要停止在表单上）。

由于.parents()不包括当前元素本身，因此需要将其.add()到结果集中。然后.map()遍集合并为集合中的每个元素创建一个字符串。使用 .get() 从 jQuery 集中获取 DOM 元素，然后将它们.join()为字符串。

在下面的代码片段中，我在form周围又增加了一个div，以便您知道.parents()是如何遍历树的。

片段：

var $parents = $("#req_val").parents().add("#req_val");
var str = $parents.map(function () {
    var retVal = this.tagName;
    retVal += this.id ? '#' + this.id : '';
    retVal += this.className ? '.' + this.className.replace(' ', '.') : '';
    return retVal;
}).get().join(' ');
$("#result").text(str);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <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>
<hr />
<p id="result"></p>

相关文章：