有没有办法根据 jQuery 中的 DOM 元素生成 CSS 选择器

发布于 2024-09-17 19:51:53 字数 658 浏览 3 评论 0原文

有没有办法获取 DOM 对象并推断出可用于稍后查找该元素的 CSS 选择器。

示例：

<ul class="items">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<script type="text/javascript">
var second = $('.items li:eq(1)');
console.log(get_css_selector(second));
</script>

其中 get_css_selector 将返回类似于 .items li:eq(1) 的内容，或者至少返回一个可用于选择元素的字符串。

如果有一种方法可以基于以下内容生成 CSS 选择器，那就太好了：

<script type="text/javascript">
var third = document.getElementsByTagName('li')[2];
console.log(get_css_selector(third));
</script>

原文

Is there a way to take a DOM object and infer a CSS selector that could be used to find that element at a later time.

Example:

<ul class="items">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<script type="text/javascript">
var second = $('.items li:eq(1)');
console.log(get_css_selector(second));
</script>

Where the get_css_selector would return something similar to .items li:eq(1) or at least a string that would work to select the element.

Bonus would be if there was a method to generate a CSS selector based on:

<script type="text/javascript">
var third = document.getElementsByTagName('li')[2];
console.log(get_css_selector(third));
</script>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

百思不得你姐 2024-09-24 19:51:53

看来您正在尝试使用原始选择器。我的说法正确吗？还是我把事情过于简单化了？

原始选择器存储在您创建的 jQuery 对象中。

尝试一下： http://jsfiddle.net/9JUJL/

var second = $('.items li:eq(1)');
var selector = second.selector;

或者奖金，这个？ http://jsfiddle.net/9JUJL/2/

function get_css_selector(elem) {
    var tag = elem.tagName.toLowerCase();
    return tag + ':eq(' + $(tag).index(elem) + ')';
}

It appears as though you're trying to use the original selector. Am I right about that? Or have I over-simplified things?

The original selector is stored in the jQuery object you created.

Try it: http://jsfiddle.net/9JUJL/

var second = $('.items li:eq(1)');
var selector = second.selector;

Or for the bonus, this? http://jsfiddle.net/9JUJL/2/

function get_css_selector(elem) {
    var tag = elem.tagName.toLowerCase();
    return tag + ':eq(' + $(tag).index(elem) + ')';
}

回复收藏 0 原文

若无相欠,怎会相见 2024-09-24 19:51:53

function createElementSelector(elm, containedInEle) {
    containedInEle = typeof(containedInEle) != 'undefined' ? containedInEle : document;

    var segs = [];

    for (; elm && elm !== containedInEle; elm = elm.parentNode) 
    { 
        segs.unshift(':nth-child(' + childNumber(elm) + ')'); 
    }; 
    return '#' + elm.id + ' ' + segs.join(' '); 
}; 

function childNumber(child) { 
    var i = 0;
    while( child.nodeType == 1 && (child = child.previousSibling) != null) {
      i++;
    }
    return i + 1; 
};

function createElementSelector(elm, containedInEle) {
    containedInEle = typeof(containedInEle) != 'undefined' ? containedInEle : document;

    var segs = [];

    for (; elm && elm !== containedInEle; elm = elm.parentNode) 
    { 
        segs.unshift(':nth-child(' + childNumber(elm) + ')'); 
    }; 
    return '#' + elm.id + ' ' + segs.join(' '); 
}; 

function childNumber(child) { 
    var i = 0;
    while( child.nodeType == 1 && (child = child.previousSibling) != null) {
      i++;
    }
    return i + 1; 
};

回复收藏 0 原文

~没有更多了~