Question

我正在使用lightwidget嵌入Instagram Feed。

当插入Feed时，我想为每个li元素添加col-xs-6类。我可以通过仅检查元素来获取li元素。

这是我定位的课程

<li class="lightwidget__tile">

这就是我写的

$('li.lightwidget__tile').each(function(){
     $(this).addClass('col-xs-6');
 })

这个没有为li元素添加类，

如果我做对了，有人可以帮助我

修改：

这是插入代码的方式

 <iframe src="//lightwidget.com/widgets/address.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width: 100%; border: 0; overflow: hidden;"></iframe>

Answer 1

您打算做什么是不可能的。 iframe必须遵守Same Origin Policy，这意味着您需要拥有驻留在iframe中的网站的管理员权限，或该网站提供的服务专门允许您访问和操作内容iframe中的页面。我快速look并没有找到任何API文档，因此除非您拥有https://lightwidget.com/，否则您将无法更改iframe中任何元素的类。

您可以使用devtools更改iframe内容的原因是因为这是设计原因。您可以使用devtools is because the iframe context is different.

对iframe执行哪些操作

我建议你使用LightWidget Builder，它有一个列设置。

现在如果我错了 ...

... 你实际拥有lightwidget.com ......
...或者这些列表项在您的网站上或者像普通DOM一样在页面上...
...或您网域上的其他网页...

...然后是的，你应该没问题。

我相信选项2已完全覆盖，即使您的原始代码也能正常工作。所以我们可以忘记2号，让我们假设1号不正确

~~... 你实际拥有lightwidget.com ......~~
~~...或者这些列表项目在您的网站上或者像普通DOM一样在页面上...~~
...或您网域上的其他网页...

3号非常合理，但是一个有争议的问题，因为LightWidget及其服务只能通过他们的网站访问。

Answer 2

试试这个

$('li.lightwidget__tile').each(function(){
 $(this).append('<div class="col-xs-6"></div>');
})

Answer 3

尝试使用jQuery传递给each的参数：

$('li.lightwidget__tile').each(function(i, e){
     // i is a counter of the loop element
     $(e).addClass('col-xs-6');
})

正如您所说，您的li是动态生成的，请尝试等待DOM更新，例如使用setTimeout：

setTimeout(function(){
    $('li.lightwidget__tile').each(function(i, e){
         // i is a counter of the loop element
         $(e).addClass('col-xs-6');
    })
}, 250)

<强>更新

如果您尝试在iframe元素中运行jQuery，我建议您查看this以及this SO问题。

Answer 4

这是与选择器匹配的FUTURE元素

$(document).on("DOMNodeInserted", "#li.lightwidget__tile", function() {
    $(this).each(function(){
         $(this).append('<div class="col-xs-6"></div>');
    })
})

希望这项工作。

Answer 5

要使用iFrame实现此目的，您必须能够将jQuery应用于通过iFrame检索的外部网络内容。

此解决方案与iFrame相同。我创建了一个PHP脚本，可以从其他网站获取所有内容，而最重要的部分是您可以轻松地将自定义jQuery应用于该外部内容。请参考以下脚本，该脚本可以从其他网站获取所有内容，然后您也可以应用自定义jQuery / JS。此内容可以在任何元素或任何页面内的任何位置使用。

<div id='myframe'>

  <?php 
   /* 
    Use below function to display final HTML inside this div
   */

   //Display Frame
   echo displayFrame(); 
  ?>

</div>

<?php

/* 
  Function to display frame from another domain 
*/

function displayFrame()
{
  $webUrl = 'http://[external-web-domain.com]/';

  //Get HTML from the URL
  $content = file_get_contents($webUrl);

  //Add custom JS to returned HTML content
  $customJS = "
  <script>

      /* Here I am writing a sample jQuery to hide the navigation menu
         You can write your own jQuery for this content
      */
    //Hide Navigation bar
    jQuery(\".navbar.navbar-default\").hide();

  </script>";

  //Append Custom JS with HTML
  $html = $content . $customJS;

  //Return customized HTML
  return $html;
}

Jquery：为动态生成的li添加类

5 个答案: