각 부모 색인을 얻는 jQuery가 잘못된 숫자를 반환합니다

예를 들어 $ (this)가 클릭 될 때 각 부모 요소의 위치를 얻는 경우 이벤트를 만듭니다. 어떤 이유로 든 내 코드가 $ (this [0])에서 잘못된 색인을 반환합니다. nodeName 가끔 1, 2 또는 3 인 색인이 올바르지 않습니다. 때때로 .parent (selector) .index()도 잘못되었습니다.각 부모 색인을 얻는 jQuery가 잘못된 숫자를 반환합니다

나는 정확한 색인을 얻었지만 틀린 값인 부모 나 자식의 잘못된 값을 얻습니다.

당신이 볼 수 있듯이 나는 id와 body가 0보다 큰 인덱스 값을 반환하지 않고 건너 뛸 수밖에 없었습니다. 나는 여전히 왜 그런지 이해하지 못합니다. 나는 .index()가 요소 + id를 가질 수 없다고 생각한다.

그래서 나는 분명히 뭔가 잘못하고있다. 어떤 도움이라도 대단히 감사 할 것입니다.

내가 만든 코드는 내가 찾은 다른 코드 스 니펫에서 다시 작성한 것입니다.

IFRAME

<iframe class="feedgo-iframe" id="feedgo" frameborder="0" border="0" src="/dashboard/temp_iframe/20141211153854-rXHSMeHV7R.html"></iframe>

코드는 아래의 HTML 코드의 일부는, 모든 부모와 함께 전체 코드는 iframe 내에로드됩니다. 동일한 도메인에가 Iframe으로 두 문서 (부분 번호)를 보유

HTML

<html> 
    <body> 
     <div class="container"> 
     <article class="sw-home-articles"> 
      <div class="sw-head"> 
       <p>Article1</p> 
      </div> 
      <div class="clearfix"> 
       <i class="glyphicons-icon notes"></i> 
       <h2><a href="http://example.com">my title</a></h2> 
      </div> 
      <p>my description</p> 
      <div class="sw-category"> 
       posted in: <a href="http://www.example.com/article/tutorials/seo/" title="View all posts in SEO">SEO</a> <a href="http://www.example.com/article/tutorials/" title="View all posts in Tutorials">Tutorials</a> <a href="http://www.example.com/article/tutorials/wordpress/" title="View all posts in WordPress">WordPress</a> 
       <p>Date posted: 17 August, 2014</p> 
      </div> 
     </article> 
     <article class="sw-home-articles"> 
      <div class="sw-head"> 
       <p>Article2</p> 
      </div> 
      <div class="clearfix"> 
       <i class="glyphicons-icon notes"></i> 
       <h2><a href="http://example.com">my title</a></h2> 
      </div> 
      <p>my description</p> 
      <div class="sw-category"> 
       posted in: <a href="http://www.example.com/article/tutorials/seo/" title="View all posts in SEO">SEO</a> <a href="http://www.example.com/article/tutorials/" title="View all posts in Tutorials">Tutorials</a> <a href="http://www.example.com/article/tutorials/wordpress/" title="View all posts in WordPress">WordPress</a> 
       <p>Date posted: 17 August, 2014</p> 
      </div> 
     </article> 
     </div> 
    </body> 
    </html>

jQuery를

$("#feedgo").contents().find("*").click(function(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 

    $.fn.reverse = [].reverse; 

    var $el = $(this); 

    var reverse_parents = $el.parents().reverse(); 
    var selectors = ""; 

    $.each(reverse_parents, function(key, value) { 
     var tag_name = $(value).prop("tagName").toLowerCase(); 
     var class_name = $(value).attr("class"); 
     var id_name = $(value).attr("id"); 
     var getindex = ""; 

     selectors += tag_name; 
     getindex += tag_name; 

     if (id_name !== undefined) { 
      selectors += "#" + id_name; 
     } else if (class_name !== undefined) { 
      selectors += "." + $.trim(class_name).replace(/\s/gi, "."); 
      getindex += "." + $.trim(class_name).replace(/\s/gi, "."); 
     } 

     if (id_name !== undefined) { 
      var skip_index_search = 1; 
     } else if (tag_name == "body") { 
      var skip_index_search = 1; 
     } else { 
      var skip_index_search = 0; 
     } 

     if (skip_index_search == 0) { 
      var eachindex = $el.parents(getindex).index(); 
     } 

     if (eachindex >= 1) { 
      selectors += ":nth-child(" + eachindex + ")"; 
     } 

     selectors += " "; 

    }); 


    selectors += $el[0].nodeName.toLowerCase(); 
    //var getindex = $el[0].nodeName.toLowerCase(); 

    //var test = $(this).parent().find(getindex).index(this); 


    var index = $($el).index(); 
    if (index) { 
     index = index + 1; 
     if (index >= 1) { 
      selectors += ":nth-child(" + index + ")"; 
     } 
    } 


    console.log(selectors); 


});

"html body div.container div#main div.sw-content-wrap div.sw-content div.sw-block-1 div.sw-inner-block article.sw-home-articles:nth-child(1) p"

출력 예 2 필요 예컨대 필요한 출력

"html body div.container div#main div.sw-content-wrap div.sw-content div.sw-block-1 div.sw-inner-block article.sw-home-articles:nth-child(3) div.clearfix h2 a"

잘못된 출력 예는 2

"html body div.container div#main div.sw-content-wrap div.sw-content div.sw-block-1 div.sw-inner-block article.sw-home-articles:nth-child(3) div.clearfix:nth-child(1) h2:nth-child(1) a"

출처

2014-12-13 SmileyWar

html, 필수 출력을 게시하는 것이 더 분명합니다. –

Amit Joki 덕분에 더 많은 도움이되었습니다. – SmileyWar

HTML에서 id = feedgo는 어디에 있습니까? – briansol

나는 이전의 대답에서 발견 된 솔루션, 내가 링크 죄송 잃었다. 그리고 나는 그 자식을 선택해야하고, 그 자식을 선택해서는 안됩니다.

다음은 다시 작성된 jQuery와 다른 솔루션을 결합한 것입니다.

$("#feedgo").contents().find("*").click(function(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 

    $.fn.reverse = [].reverse; 

    var mouse_get = $('#mouse-tail').data("get"); 

    var $el = $(this); 

     var selectors = $($el).parents().andSelf().map(function() { 
     var $this = $(this); 
     var tagName = this.nodeName; 
     var path = this.nodeName.toLowerCase(); 

     var class_name = $this.attr("class"); 

     if ($this.attr("class") !== undefined){ 
      tagName += "."+$.trim(class_name).replace(/\s/gi, "."); 
     } 

     if ($this.siblings(tagName).length > 0) { 
      var index = $this.prevAll(tagName).length +1; 
      tagName += ":nth-child(" + index + ")"; 
     } 
     return tagName; 

    }).get().join(" > "); 

    var content = $('#feedgo').contents().find(selectors); 

    });

출처

2014-12-16 09:17:27 SmileyWar

각 부모 색인을 얻는 jQuery가 잘못된 숫자를 반환합니다

답변

관련 문제