如何在iframe中找到与页面上的元素完全相同的元素

How to find the exact same element as the one on the page in an iframe

本文关键字：元素 iframe      更新时间：2023-09-26

因此，我需要在iframe中找到一个元素，该元素与网页中的元素完全相同（iframe属于同一页面）。我需要用jquery计算出没有id的元素的索引，这样我就可以在iframe中获得相同的元素。

编辑：如何找到元素的索引？

即，对于此html:

<div>
    <a>1</a>
    <a>2</a>
    <a>3</a>
    <a id="someA">4</a>
    <a>5</a>
    <a>6</a>
    <a>7</a>
</div>

我该如何从它的jQuery对象中找到一个随机锚元素的索引（这样我就可以通过执行$('a')[index]）？

（通过执行$('#someA').siblings()[Math.floor(Math.random()*6)].getIndex()）

jsfiddle：http://jsfiddle.net/YP5hQ/2/

好吧，就是这样：http://jsfiddle.net/dan_barzilay/ZB2vE/

但是你把函数搞错了。。我建议你学习一下：.get()和.index()

*请注意，我没有使用任何本地javascript。当你拥有奇妙的jQuery时就没有必要了：）

**我把$(elem).html(c);改成了$(elem).html(h);，因为我认为如果不简单地用c 更改h，就必须用h

祝你好运！

您可以使用这个函数，它基本上接受一个元素，并向后查看它的确切路径。我没有把它用于你的计划，但我不明白为什么它不起作用。

function mirrorpath ( elm ) {
  /// add an indentifying segment to the path for each parent element
  var addtopath = function( elm ){
    var node = $(elm), ident = '';
    /// first off, add our nodeName to our identity
    ident += node.get(0).nodeName;
    /// if we have an id, then we are specific enough
    if ( node.attr('id') ) {
      ident += '#' + node.attr('id');
    }
    /// otherwise
    else{
      /// if we have a class, that's good :)
      if ( node.attr('class') ) {
        ident += '.' + node.attr('class').split(' ').join('.');
      }
      /// now make it more accurate with an index offset
      ident += ':eq('+node.prevAll(ident).add(node).index(node)+')';
    }
    /// add our new path segment
    path.push( ident );
  }
  /// step through the target elements parents and build our path
  var parents = $(elm).parents().get(), path = [], i = parents.length;
  while ( i-- ) { addtopath( parents[i] ); }; addtopath( elm );
  /// implode the path and return
  return path.join(' ');
}

返回的路径应该在主页面和iframe上评估并查找元素——您所要做的就是将路径反馈到jQuery中。我不得不承认，你的问题很奇怪；）

ps。我还没有在非常复杂的深层元素中测试过这段代码，所以在某些情况下它可能会失败。。。它也可以通过不使用数组作为路径存储来优化（

并愚蠢地在每次迭代中重新加入…我刚刚更新了代码来优化这个问题），但多亏了jQuery和Sizzle，它可以满足我迄今为止所需的一切。

编辑/更新

为了防止这有用，我决定为自己修改一下代码，并将其转换为jQuery插件。现在有一些关于实际css路径生成的优化，以及对jQuery解析路径时的运行情况的乐观。

(function($){
  $.fn.cssPath = function () {
    var paths = [], addtopath = function( elm ){
      if ( elm && (elm.nodeName || (elm instanceof $ && elm.length)) ) {
        var node = $(elm), ident = String(node.get(0).nodeName).toLowerCase();
        /// if we have an id, then we are specific enough
        if ( node.attr('id') ) {
          ident += '#' + node.attr('id');
        }
        /// otherwise
        else{
          /// if we have a class, that's good :)
          if ( node.attr('class') ) {
            ident += '.' + node.attr('class').split(' ').join('.');
          };
          /// make sure there is a point to being more specific (leads to nicer paths)
          if ( node.siblings(ident).length > 0 ) {
            /// now make it more accurate with an index offset
            //ident += ':eq('+node.prevAll(ident).add(node).index(node)+')';
            ident += ':nth-child('+(node.index()+1)+')';
          };
        };
        /// add our new path segment
        return ident;
      };
    };
    this.each(function(){
      /// find the parents for this element, and add the current element to the list
      var parents = $(this).parents().get(), path = '', i = parents.unshift(this) && parents.length;
      /// build up the path string per parent
      while ( i-- ) { path += (path ? ' > ' : '') + addtopath( parents[i] ); };
      /// return the path to our paths list
      paths.push(path);
    });
    /// if one path, return string, if more return array
    return ( paths.length > 1 ? paths : paths[0] );
  }
})((typeof jQuery != undefined) && jQuery);

用法：

var path = $('#my_target_element').cssPath();

示例输出：

html > body > div#BlogArchive1 > ul.hierarchy > li.archivedate.expanded > a
相关文章：