Question

例如，如果我在单击$（this）时创建一个事件，则获取每个父元素的位置。由于某种原因，我的代码在其$（this [0]）返回一个不正确的索引.nodeName我有时会得到一个1,2或3的索引，这是不正确的。有时.parents（选择器）.index（）也是错误的。

我确实在正确的索引上获得了正确的索引，但也从正确错误的父级或子级中获取了不正确的值。

正如你所看到的那样，我必须跳过任何带有id和身体的东西才能返回超过0的索引值，我仍然不明白为什么。我猜.index（）不能保持元素+ id

很明显，我做错了什么。任何帮助将不胜感激。

我创建的代码是从我找到的其他代码片段重建。

IFRAME

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

下面的代码是html代码的一部分，所有父代的完整代码都加载到iframe中。

HTML，将两篇文章（部分代码）保存到同一域的iframe

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


});

必需的输出示例1

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

Answer 1

我从之前的回答中找到的解决方案，我丢失了链接抱歉。而且我必须选择孩子而不是后代。

这是重写的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);

    });

获取每个父索引的jQuery返回错误的数字

1 个答案: