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/

Answer 2

您可以使用parents()或.parentsUntil()（如果您需要在表单中停止）。

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

在下面的代码段中，我在div周围再添加了一个form，以便了解.parents()如何遍历树。

<强> 段：

＆＃13;

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);

＆＃13;

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

＆＃13;

获取所有父级并将其存储在字符串中

2 个答案: