내가 jQuery를 개체에서 선택을받을 수있는 방법

해결법

1.좋아, 그래서 Fidilip 아스 커 질문 위의 의견에 그가 / 그녀는 정말 이후의 것은 현재 요소에 대한 경로를 얻을 수 있다고 말했다.

좋아, 그래서 Fidilip 아스 커 질문 위의 의견에 그가 / 그녀는 정말 이후의 것은 현재 요소에 대한 경로를 얻을 수 있다고 말했다.

다음은 DOM의 조상 트리를 "상승"후 어떤 ID 또는 클래스 클릭 한 항목에 속성을 포함하여 매우 구체적인 선택을 구축하는 스크립트입니다.

이 jsFiddle 작업을 참조하십시오 : http://jsfiddle.net/Jkj2n/209/

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $(function() {
        $("*").on("click", function(e) {
          e.preventDefault();
          var selector = $(this)
            .parents()
            .map(function() { return this.tagName; })
            .get()
            .reverse()
            .concat([this.nodeName])
            .join(">");

          var id = $(this).attr("id");
          if (id) { 
            selector += "#"+ id;
          }

          var classNames = $(this).attr("class");
          if (classNames) {
            selector += "." + $.trim(classNames).replace(/\s/gi, ".");
          }

          alert(selector);
      });
    });
    </script>
</head>
<body>
<h1><span>I love</span> jQuery</h1>
<div>
  <p>It's the <strong>BEST THING</strong> ever</p>
  <button id="myButton">Button test</button>
</div>
<ul>
  <li>Item one
    <ul>
      <li id="sub2" >Sub one</li>
      <li id="sub2" class="subitem otherclass">Sub two</li>
    </ul>
  </li>
</ul>
</body>
</html>

아래의 HTML에 2 목록 중첩 된 목록 항목을 클릭했다 예를 들어, 다음과 같은 결과를 얻을 것이다 :

HTML> BODY> UL> LI> UL> LI 번호의 sub2.subitem.otherclass

2.어제의 코드에 파고 때 jQuery 오브젝트는 선택 속성 I 톱을 가지고있다. 그것이 문서에 정의되어있는 경우는 (미래의 교정을 위해) 얼마나 신뢰할 수있는 모르겠어요. 그러나 그것은 작동한다!

어제의 코드에 파고 때 jQuery 오브젝트는 선택 속성 I 톱을 가지고있다. 그것이 문서에 정의되어있는 경우는 (미래의 교정을 위해) 얼마나 신뢰할 수있는 모르겠어요. 그러나 그것은 작동한다!
```
$('*').selector // returns *
```
편집 : 당신이 이벤트 내부의 선택을 찾을 수 있다면 요소가 다양한 선택기를 통해 할당 된 다수의 클릭 이벤트를 가질 수 있기 때문에, 그 정보가 이상적으로 이벤트 자체가 아니라 요소의 일부가되어야합니다. 해결책은 직접 추가하는 대신 이벤트를 추가 () (), 클릭 등 주변 바인딩에 래퍼를 사용하는 것입니다.
```
jQuery.fn.addEvent = function(type, handler) {
    this.bind(type, {'selector': this.selector}, handler);
};
```
선택기가 개체의 특성 이름을 선택로 전달되고있다. event.data.selector로 액세스 할 수 있습니다.

의 일부 마크 업 (http://jsfiddle.net/DFh7z/)에 그것을 시도하자
```
<p class='info'>some text and <a>a link</a></p>

$('p a').addEvent('click', function(event) {
    alert(event.data.selector); // p a
});
```
면책 조항 : DOM 탐색 방법을 사용할 경우 단지 라이브 () 이벤트와 마찬가지로 선택 속성이 잘못 될 수 있음을 기억하십시오.
```
<div><a>a link</a></div>
```
살고있는 의지하지 작업 아래의 코드는 선택 속성에 의존 어떤이 경우 a.parent이다 () - 잘못된 선택.
```
$('a').parent().live(function() { alert('something'); });
```
우리 addEvent 방법은 발광합니다,하지만 당신은 너무 잘못된 선택을 볼 수 - a.parent을 ().

3.@drzaus과의 협력에서 우리는 다음과 같은 jQuery 플러그인을 마련했습니다.

@drzaus과의 협력에서 우리는 다음과 같은 jQuery 플러그인을 마련했습니다.

!(function ($, undefined) {
    /// adapted http://jsfiddle.net/drzaus/Hgjfh/5/

    var get_selector = function (element) {
        var pieces = [];

        for (; element && element.tagName !== undefined; element = element.parentNode) {
            if (element.className) {
                var classes = element.className.split(' ');
                for (var i in classes) {
                    if (classes.hasOwnProperty(i) && classes[i]) {
                        pieces.unshift(classes[i]);
                        pieces.unshift('.');
                    }
                }
            }
            if (element.id && !/\s/.test(element.id)) {
                pieces.unshift(element.id);
                pieces.unshift('#');
            }
            pieces.unshift(element.tagName);
            pieces.unshift(' > ');
        }

        return pieces.slice(1).join('');
    };

    $.fn.getSelector = function (only_one) {
        if (true === only_one) {
            return get_selector(this[0]);
        } else {
            return $.map(this, function (el) {
                return get_selector(el);
            });
        }
    };

})(window.jQuery);

// http://stackoverflow.com/questions/2420970/how-can-i-get-selector-from-jquery-object/15623322#15623322
!function(e,t){var n=function(e){var n=[];for(;e&&e.tagName!==t;e=e.parentNode){if(e.className){var r=e.className.split(" ");for(var i in r){if(r.hasOwnProperty(i)&&r[i]){n.unshift(r[i]);n.unshift(".")}}}if(e.id&&!/\s/.test(e.id)){n.unshift(e.id);n.unshift("#")}n.unshift(e.tagName);n.unshift(" > ")}return n.slice(1).join("")};e.fn.getSelector=function(t){if(true===t){return n(this[0])}else{return e.map(this,function(e){return n(e)})}}}(window.jQuery)

<html>
    <head>...</head>
    <body>
        <div id="sidebar">
            <ul>
                <li>
                    <a href="/" id="home">Home</a>
                </li>
            </ul>
        </div>
        <div id="main">
            <h1 id="title">Welcome</h1>
        </div>

        <script type="text/javascript">

            // Simple use case
            $('#main').getSelector();           // => 'HTML > BODY > DIV#main'

            // If there are multiple matches then an array will be returned
            $('body > div').getSelector();      // => ['HTML > BODY > DIV#main', 'HTML > BODY > DIV#sidebar']

            // Passing true to the method will cause it to return the selector for the first match
            $('body > div').getSelector(true);  // => 'HTML > BODY > DIV#main'

        </script>
    </body>
</html>

http://jsfiddle.net/CALY5/5/

4.이 시도 했습니까?

이 시도 했습니까?

 $("*").click(function(){
    $(this).attr("id"); 
 });

5.내가 jQuery 플러그인을 발표했습니다 jQuery를 Selectorator, 당신은이 같은 선택을받을 수 있습니다.

내가 jQuery 플러그인을 발표했습니다 jQuery를 Selectorator, 당신은이 같은 선택을받을 수 있습니다.
```
$("*").on("click", function(){
  alert($(this).getSelector().join("\n"));
  return false;
});
```

6.이 시도:

이 시도:

$("*").click(function(event){
    console.log($(event.handleObj.selector));
 });

7.$이 방식으로 작동 이상 그냥 레이어를 추가 :

$이 방식으로 작동 이상 그냥 레이어를 추가 :

$ = (함수 (JQ) { 창 (함수 () { VAR FNC = jQ.apply (이, 인자); fnc.selector = (에서 arguments.length> 0) 인수 [0] : 널; FNC 반환; }); }) ($);

지금 당신은 ( "A") $처럼. 선택을 일을 할 수 있으며, "A", 심지어 새로운 jQuery를 버전에 반환합니다.
8.http://www.selectorgadget.com/이 사용 사례에 대해 명시 적으로 디자인 된 북마크입니다.

http://www.selectorgadget.com/이 사용 사례에 대해 명시 적으로 디자인 된 북마크입니다.

그게 내가 코드가 지속되지 않습니다 그들을 생성하기 위해 노력하고, 당신은 단지 CSS 선택기 스스로 배워야한다고 다른 대부분의 사람들이 동의했다. :)

9.나는 @의 jessegavin의 수정에 대한 몇 가지 수정 사항을 추가했습니다.

나는 @의 jessegavin의 수정에 대한 몇 가지 수정 사항을 추가했습니다.

요소에 ID가있을 경우 즉시 반환합니다. 또한 이름 속성 검사와 요소가 더 아이디, 클래스, 또는 이름이없는 경우에 n 번째 자식 선택기를 추가했다.

경우 이름의 힘 필요의 범위 지정은 여러 페이지의 형태와 유사한 입력이 있습니다,하지만 난 아직 처리하지 않았다.

function getSelector(el){
    var $el = $(el);

    var id = $el.attr("id");
    if (id) { //"should" only be one of these if theres an ID
        return "#"+ id;
    }

    var selector = $el.parents()
                .map(function() { return this.tagName; })
                .get().reverse().join(" ");

    if (selector) {
        selector += " "+ $el[0].nodeName;
    }

    var classNames = $el.attr("class");
    if (classNames) {
        selector += "." + $.trim(classNames).replace(/\s/gi, ".");
    }

    var name = $el.attr('name');
    if (name) {
        selector += "[name='" + name + "']";
    }
    if (!name){
        var index = $el.index();
        if (index) {
            index = index + 1;
            selector += ":nth-child(" + index + ")";
        }
    }
    return selector;
}

10.내가 더 많은 핀을 가리키는 DOM 요소, dds1024 작업을 확장 그래서, 심지어 위의 해결 후 여러 요소를 얻고 있었다.

내가 더 많은 핀을 가리키는 DOM 요소, dds1024 작업을 확장 그래서, 심지어 위의 해결 후 여러 요소를 얻고 있었다.

예를 들면 DIV : n 번째 자식 (1) DIV : n 번째 자식 (3) DIV : n 번째 자식 (1) 제 : n 번째 자식 (1) DIV : n 번째 자식 (1) DIV : n 번째 자식 (8) DIV : n 번째 자식 (2) DIV : n 번째 자식 (1) DIV : n 번째 자식 (2) DIV : n 번째 자식 (1) H4 : n 번째 자식 (2)

암호:

function getSelector(el)
{
    var $el = jQuery(el);

    var selector = $el.parents(":not(html,body)")
                .map(function() { 
                                    var i = jQuery(this).index(); 
                                    i_str = ''; 

                                    if (typeof i != 'undefined') 
                                    {
                                        i = i + 1;
                                        i_str += ":nth-child(" + i + ")";
                                    }

                                    return this.tagName + i_str; 
                                })
                .get().reverse().join(" ");

    if (selector) {
        selector += " "+ $el[0].nodeName;
    }

    var index = $el.index();
    if (typeof index != 'undefined')  {
        index = index + 1;
        selector += ":nth-child(" + index + ")";
    }

    return selector;
}

11.클릭 된 HTML 엘리먼트 -이 당신에게 얻을 수있는 선택의 경로

클릭 된 HTML 엘리먼트 -이 당신에게 얻을 수있는 선택의 경로

 $("*").on("click", function() {

    let selectorPath = $(this).parents().map(function () {return this.tagName;}).get().reverse().join("->");

    alert(selectorPath);

    return false;

});

12.글쎄, 난이 간단한 jQuery 플러그인을 썼다.

글쎄, 난이 간단한 jQuery 플러그인을 썼다.

이 checkes ID 또는 클래스 이름 및 시도는 가능한 한 정확한 선택으로 제공합니다.

jQuery.fn.getSelector = function() {

    if ($(this).attr('id')) {
        return '#' + $(this).attr('id');
    }

    if ($(this).prop("tagName").toLowerCase() == 'body')    return 'body';

    var myOwn = $(this).attr('class');
    if (!myOwn) {
        myOwn = '>' + $(this).prop("tagName");
    } else {
        myOwn = '.' + myOwn.split(' ').join('.');
    }

    return $(this).parent().getSelector() + ' ' + myOwn;
}

13.당신은 클릭 된 현재 태그의 이름을 얻으려고 노력하고 있습니까?

당신은 클릭 된 현재 태그의 이름을 얻으려고 노력하고 있습니까?

그렇다면, 이렇게 ..
```
$("*").click(function(){
    alert($(this)[0].nodeName);
});
```
당신은 정말 "선택"을 얻을 수 없다, 당신의 경우에 "선택"은 *입니다.

14.내가 그것을 필요에 따라 같은 자바 스크립트 코드, 경우에 하나의 요구. 단지 위에서 선택한 대답이 바로 번역.

내가 그것을 필요에 따라 같은 자바 스크립트 코드, 경우에 하나의 요구. 단지 위에서 선택한 대답이 바로 번역.

    <script type="text/javascript">

function getAllParents(element){
    var a = element;
    var els = [];
    while (a && a.nodeName != "#document") {
        els.unshift(a.nodeName);
        a = a.parentNode;
    }
    return els.join(" ");
}

function getJquerySelector(element){

    var selector = getAllParents(element);
    /* if(selector){
        selector += " " + element.nodeName;
    } */
    var id = element.getAttribute("id");
    if(id){
        selector += "#" + id;
    }
    var classNames = element.getAttribute("class");
    if(classNames){
        selector += "." + classNames.replace(/^\s+|\s+$/g, '').replace(/\s/gi, ".");
    }
    console.log(selector);
    alert(selector);
    return selector;
}
</script>

15.계정에 복용 일부 답변은 내가이 제안하고 싶습니다 여기에 읽기 :

계정에 복용 일부 답변은 내가이 제안하고 싶습니다 여기에 읽기 :

function getSelectorFromElement($el) {
  if (!$el || !$el.length) {
    return ;
  }

  function _getChildSelector(index) {
    if (typeof index === 'undefined') {
      return '';
    }

    index = index + 1;
    return ':nth-child(' + index + ')';
  }

  function _getIdAndClassNames($el) {
    var selector = '';

    // attach id if exists
    var elId = $el.attr('id');
    if(elId){
      selector += '#' + elId;
    }

    // attach class names if exists
    var classNames = $el.attr('class');
    if(classNames){
      selector += '.' + classNames.replace(/^\s+|\s+$/g, '').replace(/\s/gi, '.');
    }

    return selector;
  }

  // get all parents siblings index and element's tag name,
  // except html and body elements
  var selector = $el.parents(':not(html,body)')
    .map(function() {
      var parentIndex = $(this).index();

      return this.tagName + _getChildSelector(parentIndex);
    })
    .get()
    .reverse()
    .join(' ');

  if (selector) {
    // get node name from the element itself
    selector += ' ' + $el[0].nodeName +
      // get child selector from element ifself
      _getChildSelector($el.index());
  }

  selector += _getIdAndClassNames($el);

  return selector;
}

JQuery와 플러그인을 만들 어쩌면 유용한?

16.당신이 p1nox 감사합니다!

당신이 p1nox 감사합니다!

내 문제는 양식의 일부를 수정 한 아약스 호출에 초점을 다시 넣어했다.

$.ajax({  url : "ajax_invite_load.php",
        async : true,
         type : 'POST',
         data : ...
     dataType : 'html',
      success : function(html, statut) {
                    var focus = $(document.activeElement).getSelector();
                    $td_left.html(html);
                    $(focus).focus();
                }
});

나는 단지 jQuery 플러그인에 기능을 캡슐화하는 데 필요한 :

    !(function ($, undefined) {

    $.fn.getSelector = function () {
      if (!this || !this.length) {
        return ;
      }

      function _getChildSelector(index) {
        if (typeof index === 'undefined') {
          return '';
        }

        index = index + 1;
        return ':nth-child(' + index + ')';
      }

      function _getIdAndClassNames($el) {
        var selector = '';

        // attach id if exists
        var elId = $el.attr('id');
        if(elId){
          selector += '#' + elId;
        }

        // attach class names if exists
        var classNames = $el.attr('class');
        if(classNames){
          selector += '.' + classNames.replace(/^\s+|\s+$/g, '').replace(/\s/gi, '.');
        }

        return selector;
      }

      // get all parents siblings index and element's tag name,
      // except html and body elements
      var selector = this.parents(':not(html,body)')
        .map(function() {
          var parentIndex = $(this).index();

          return this.tagName + _getChildSelector(parentIndex);
        })
        .get()
        .reverse()
        .join(' ');

      if (selector) {
        // get node name from the element itself
        selector += ' ' + this[0].nodeName +
          // get child selector from element ifself
          _getChildSelector(this.index());
      }

      selector += _getIdAndClassNames(this);

      return selector;
    }

})(window.jQuery);

17.이렇게하면 DOM 경로를 표시하지 않습니다, 그러나 그것은 출력 객체를 볼 때, 예를 들어 크롬 디버거에 표시되는 내용의 문자열 표현을 것이다.

이렇게하면 DOM 경로를 표시하지 않습니다, 그러나 그것은 출력 객체를 볼 때, 예를 들어 크롬 디버거에 표시되는 내용의 문자열 표현을 것이다.
```
$('.mybtn').click( function(event){
    console.log("%s", this);    // output: "button.mybtn"
});
```
https://developer.chrome.com/devtools/docs/console-api#consolelogobject-object
18.방법에 대해 :

방법에 대해 :
```
var selector = "*"
$(selector).click(function() {
    alert(selector);
});
```
내가 jQuery를 사용 하였다 선택기 텍스트를 저장 믿지 않는다. 결국, 어떻게 것 그 일이 뭔가를 한 경우 :
```
$("div").find("a").click(function() {
    // what would expect the 'selector' to be here?
});
```

19.가장 좋은 대답이 될 것이다

가장 좋은 대답이 될 것이다

var selector = '#something';

$(selector).anything(function(){
  console.log(selector);
});

from https://stackoverflow.com/questions/2420970/how-can-i-get-selector-from-jquery-object by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 자동 스케일링 입력 [TYPE = 텍스트] 값 폭을 위해? (0)	2020.10.24
[JQUERY] 캔의 jQuery .keypress () 더 동시에 하나의 키보다 감지? (0)	2020.10.24
[JQUERY] jQuery로 최초의 "N"항목을 선택 (0)	2020.10.24
[JQUERY] 다른 페이지에서 ID에 jQuery를 스크롤 (0)	2020.10.24
[JQUERY] 자바 스크립트 / jQuery를 사용하여 속성 데이터 - *의 목록을 가져옵니다 (0)	2020.10.24

복붙노트

[JQUERY] 내가 jQuery를 개체에서 선택을받을 수있는 방법

내가 jQuery를 개체에서 선택을받을 수있는 방법

해결법

1.좋아, 그래서 Fidilip 아스 커 질문 위의 의견에 그가 / 그녀는 정말 이후의 것은 현재 요소에 대한 경로를 얻을 수 있다고 말했다.

2.어제의 코드에 파고 때 jQuery 오브젝트는 선택 속성 I 톱을 가지고있다. 그것이 문서에 정의되어있는 경우는 (미래의 교정을 위해) 얼마나 신뢰할 수있는 모르겠어요. 그러나 그것은 작동한다!

3.@drzaus과의 협력에서 우리는 다음과 같은 jQuery 플러그인을 마련했습니다.

4.이 시도 했습니까?

5.내가 jQuery 플러그인을 발표했습니다 jQuery를 Selectorator, 당신은이 같은 선택을받을 수 있습니다.

6.이 시도:

7.$이 방식으로 작동 이상 그냥 레이어를 추가 :

8.http://www.selectorgadget.com/이 사용 사례에 대해 명시 적으로 디자인 된 북마크입니다.

9.나는 @의 jessegavin의 수정에 대한 몇 가지 수정 사항을 추가했습니다.

10.내가 더 많은 핀을 가리키는 DOM 요소, dds1024 작업을 확장 그래서, 심지어 위의 해결 후 여러 요소를 얻고 있었다.

11.클릭 된 HTML 엘리먼트 -이 당신에게 얻을 수있는 선택의 경로

12.글쎄, 난이 간단한 jQuery 플러그인을 썼다.

13.당신은 클릭 된 현재 태그의 이름을 얻으려고 노력하고 있습니까?

14.내가 그것을 필요에 따라 같은 자바 스크립트 코드, 경우에 하나의 요구. 단지 위에서 선택한 대답이 바로 번역.

15.계정에 복용 일부 답변은 내가이 제안하고 싶습니다 여기에 읽기 :

16.당신이 p1nox 감사합니다!

17.이렇게하면 DOM 경로를 표시하지 않습니다, 그러나 그것은 출력 객체를 볼 때, 예를 들어 크롬 디버거에 표시되는 내용의 문자열 표현을 것이다.

18.방법에 대해 :

19.가장 좋은 대답이 될 것이다

'JQUERY' 카테고리의 다른 글

티스토리툴바