Javascript get list items from a js parsed string

Question

I think the best way to approach this is jump straight in and explain as I go.

I am using wordpess with a custom made template (we made it) this code is to deal with the twitter widget pro. (this isn't the prettiest of code granted, I will clean it up later)

<?php

/*
  * TWITTER SIDE BAR
  *
  * Sets the twitter area to display: none and pulls in the content from the server
  * Javascript then does a string replace to remove a bit of unwanted text
  * finally javascript will write the doctored string to the client browser
*/

?><div id="twitterRight">

  <ul class="xoxo" style="list-style-type:none; font-size:11px; margin:0px 20px 0 0;">
    <li id="twitter-2" class="widget-container widget_twitter">
    <div id="twitHold" style="display:none;">
    <h3 class="widget-title"><span class='twitterwidget twitterwidget-title'><a href="http://www.twitter.com/username" target="_blank"><img src="<?php echo home_url(); ?>/images/twitterName.png" width="208" height="27" alt="EhomeS" /></a></span></h3>

  <ul>
  <?php 
    $twitter = dynamic_sidebar('primary-widget-area');
  ?></ul>
  </div>
  <div id="twitHolder">

  <script type="text/javascript">
    // Get the posted content from the server
    var str = $('#twitHold').html();
    var x = str.replace("Twitter: @username", "");
    //var shortString = x.substr( 0, 10 );
    document.write(x);
  </script>    
  </div>

  </li></ul>
</div><!-- END #twitterRight -->

The problem is the wordpress function dynamic_sidebar doesn't return a string or anything, only a boolean value so I cannot manipulate that. So what I have done is stored the outputted HTML in a js variable x and manipulated it from there.

What I am trying to achieve is to simply limit the number of characters in each list item (tweets) however I cannot find a way of doing so. I have tried this so far with no luck (im thinking because the javascript is writing it out and parsing it, im not sure).

Is there a way to perform the substr on the list items?

lukenz · Accepted Answer · 2012-08-28 09:33:16Z

1

Question is a little unclear, if you want a collection of the list items then try this.

use a jquery selector, jquery has good documentation http://jquery.com/

be sure to add the jquery library to your document.

<ul id="twitterlist">
  <?php 
    $twitter = dynamic_sidebar('primary-widget-area');
?></ul>

<script type="text/javascript">
var listitems = $('#twitterlist').children();
</script>

answered Aug 28, 2012 at 9:33

lukenz

1391 bronze badge

Sign up to request clarification or add additional context in comments.

9 Comments

zomboble Over a year ago

Hey thanks for the comment, all I am getting on the browser window is [object Object] any reason why? (given you an upvote)

lukenz Over a year ago

use the chrome javascript debugger, to have a look inside the javascript execution variables, you should be able to get a clearer picture

zomboble Over a year ago

In he outer html its giving "<script type="text/javascript"> // Get the posted content from the server var str = $('#twitHold').html(); var x = str.replace("Twitter: @designworks_UK", ""); var listitems = $('#twitHolder').children(); document.write(listitems); //var shortString = x.substr( 0, 10 ); //document.write(x); </script>" so I think this is where I am getting stuck, the javascript is parsed rather than actually adding to the "html" or am i wrong?

lukenz Over a year ago

use $('#twitholder').html(x) to insert into the DOM

zomboble Over a year ago

Ahh thank you! Now, one final(i hope) question, its outputting [li#twitter-2.widget-container, li, li, li] so.. can i iterate through this and edit the text inside of that then write it back out to the document? Thanks for all your help by the way! Fast edit, if i select an array key eg listitems[0] then it gives me list items: [object HTMLLIElement] so it must be possible some how to do this :S ?

|

Collectives™ on Stack Overflow

Javascript get list items from a js parsed string

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related