Jquery : Adding class to dynamically generated li

Question

i am using lightwidget to embed instagram feed.

When feed is inserted i want to add col-xs-6 class to each li element. i can get li elements by going to inspect element only.

this is the class that i am targeting

<li class="lightwidget__tile">

this is what i wrote

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

this one does not add class to li elements ,

can someone help me if i am doing it right

Edit :

This is how code is being inserted

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

add col-xs-6 class to each li element when feed is inserted itself. Where is feed inserting ? — mujuonly, Jun 10 '17 at 09:10
do `addClass()` coding where feeds are inserting. Show the code how's you are inserting the feeds? — Alive to die - Anant, Jun 10 '17 at 09:11
Does this work: `$('li.lightwidget__tile').addClass('col-xs-6')`? — squgeim, Jun 10 '17 at 09:14
try this $(document).find('li.lightwidget__tile').addClass('col-xs-6'); — JYoThI, Jun 10 '17 at 09:16
@Sikander i said the insertion code not the iframe html. How's this ifram is inserted? i want that code? — Alive to die - Anant, Jun 10 '17 at 09:37
@AlivetoDie i used lightwidget that gives me iframe to be embedded but when i inspect element it gives this html — Sikander, Jun 10 '17 at 09:42

zer00ne · Answer 1 · 2017-06-10T11:16:38.003

What you intend to do is not possible. iframes must abide by Same Origin Policy which means you need to have admin privileges to the website that resides in the iframe, or the site has a service that specifically allows you to access and manipulate the content of the page within the iframe. I took a quick look and didn't find any API documentation so unless you own https://lightwidget.com/ you will not be able to change classes of any element within the iframe.

The reason why you are able to change content inside the iframe with devtools is because that's by design. What you are able to do on an iframe with devtools is because the iframe context is different.

I suggest that you use the LightWidget Builder, it has a setting for columns.

Now if I'm wrong...

...and you actually do own lightwidget.com...
...or these list items are on your website either on the page like normal DOM...
...or on another page on your domain...

...then yes you should have no problem.

I believe option 2 was fully covered and even your original code would've worked. So we can forget about number 2 and let's assume number 1 is not true

~~...and you actually do own lightwidget.com...~~
~~...or these list items are on your website either on the page like normal DOM...~~
...or on another page on your domain...

Number 3 is very plausible, but a moot point because LightWidget and their services are accessed through their website exclusively.

Thanks for the answer, yes nothing worked for me so i used instafeed.js — Sikander, Jun 10 '17 at 11:29

score 0 · Answer 2 · answered Jun 10 '17 at 09:22

0

Try This One

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

answered Jun 10 '17 at 09:22

Evhz · Answer 3 · 2017-06-10T09:52:07.793

0

Try using the arguments passed to each by jQuery:

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

As you say, your li is dynamically generated, try to wait a bit for the DOM to be updated, for example using setTimeout :

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

Update

In case you are trying to run jQuery inside iframe element, I recommend you to have a look to this and also this SO questions.

edited Jun 10 '17 at 09:52

answered Jun 10 '17 at 09:30

Evhz

8,852
9
51
69

then it might be that your dynamically generated li is not present in the dom for jquery when you apply the `each()` command... let me update the answer with a `setTimeout()` you could try to wait for the li to be available. – Evhz Jun 10 '17 at 09:38
@Sikander try to tweak the timeout value, maybe less time also might work. And also make sure you have your `li` element feed present in your html. – Evhz Jun 10 '17 at 09:45
this one ? setTimeout(function(){ $('.lightwidget-widget').contents().find('li.lightwidget__tile').each(function(i, e){ $(this).addClass('col-xs-6'); }) }, 1000); – Sikander Jun 10 '17 at 09:59

score 0 · Answer 4 · answered Jun 10 '17 at 10:13

0

this is FUTURE elements matching the selector

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

Hope this work.

answered Jun 10 '17 at 10:13

Santosh

393
2
11

score 0 · Answer 5 · answered Jan 16 '19 at 09:43

To achieve this using iFrame, you must be able to apply jQuery to the external web content that is being retrieved via iFrame.

This solution works same as iFrame. I have created a PHP script that can get all the contents from the other website, and most important part is you can easily apply your custom jQuery to that external content. Please refer to the following script that can get all the contents from the other website and then you can apply your cusom jQuery/JS as well. This content can be used anywhere, inside any element or any page.

<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 : Adding class to dynamically generated li

5 Answers5