CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sikander
Sikander

Reputation: 2835

Jquery : Adding class to dynamically generated li

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>

Upvotes: 3

Views: 2492

Answers (5)

Ahsan Horani
Ahsan Horani

Reputation: 319

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

Upvotes: 0

zer00ne
zer00ne

Reputation: 43880

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

  1. ...and you actually do own lightwidget.com...

  2. ...or these list items are on your website either on the page like normal DOM...

  3. ...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

  1. ...and you actually do own lightwidget.com...

  2. ...or these list items are on your website either on the page like normal DOM...

  3. ...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.

Upvotes: 1

Santosh
Santosh

Reputation: 381

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.

Upvotes: 0

Evhz
Evhz

Reputation: 9248

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.

Upvotes: 0

user7708095
user7708095

Reputation:

Try This One

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

Upvotes: 0

Related Questions