Есть ли способ создать селектор CSS на основе элемента DOM в jQuery - PullRequest
4 голосов
/ 04 сентября 2010

Есть ли способ взять объект 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>

Ответы [ 2 ]

3 голосов
/ 04 сентября 2010

Похоже, что вы пытаетесь использовать оригинальный селектор.Я прав в этом?Или я слишком упрощен?

Оригинальный селектор хранится в созданном вами объекте 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) + ')';
}
1 голос
/ 24 января 2012
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; 
}; 
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...