javascript - How can I use Greasemonkey to reorganize a <ul> list? -

-

i tried adapt someone's script stack overflow post, did wrong. i've got no experience javascript or jquery, so... please help?

the target-page html looks this:

<div class="container7">     <div class="userdata">         <h4></h4>         <ul id="userinfo" class="set textsize">             <li class="name"></li>             <li class="joindate"></li>             <li class="title"></li>             <li class="custom"></li>             <li class="description"></li>         </ul>     </div> </div>

i want modify this:

<div class="container7">     <div class="userdata">         <h4></h4>         <ul id="userinfo" class="set textsize">             <li class="joindate"></li>             <li class="name"></li>             <li class="custom"></li>             <li class="description"></li>             <li class="title"></li>         </ul>     </div> </div>


tried this:

// ==userscript== // @name        reorganize li // @namespace   blah // @description reorganize li // @include     https://www.thewebsite.com/* // @version     1 // @grant       none // ==/userscript==  var container    = document.queryselector (".userdata"); var firsttargdiv = container.queryselector (".userdata > li.name:first-child"); var lasttargdiv  = container.queryselector (".userdata > li.joindate:last-child");  //-- swap last first. container.insertbefore (lasttargdiv, firsttargdiv);  //-- move old first last. container.appendchild (firsttargdiv);

as start -- flipping first two. didn't work. wasn't sure had done wrong. i've tried testing different queryselector values, nothing seems work.

that code work (sort of) except css selectors, passed queryselector, off. html gave, should be:

var container    = document .queryselector ("div.userdata > ul"); var firsttargdiv = container.queryselector ("li.name"); var lasttargdiv  = container.queryselector ("li.joindate");

also, <li>s not have ended quite wanted.

to sort uniform collection of nodes append them container in order want them. appending existing nodes moves nodes.

if list of nodes (the <li>s in case) each have unique identifier or contained text, use array define arbitrary sort order.
in case, each <li> has unique css class we'll define sort order so:

var classorder = ["joindate", "name", "custom", "description", "title"];

we can use array snag each <li> class , append in desired order.

using jquery, complete userscript become:

// ==userscript== // @name     reorganize li // @include  https://www.thewebsite.com/* // @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js // @grant    gm_addstyle // ==/userscript== /*- @grant gm_addstyle directive needed work around design      change introduced in gm 1.0.   restores sandbox. */ var classorder  = ["joindate", "name", "custom", "description", "title"]; var containernd = $("div.userdata > ul");  (var j = 0, l = classorder.length;  j < l;  j++) {     var targetnode  = containernd.find ('li.' + classorder[j]);     containernd.append (targetnode); }


can see code in action @ jsfiddle.


Comments

Post a Comment

Popular posts from this blog

php - render data via PDO::FETCH_FUNC vs loop -

-
i've been using 2 methods render data. the first one: function name($id,$name){ return '<div id="'.$id.'">'.$name.'</div>'; } echo implode($pdo->query("select id,name user")->fetchall(pdo::fetch_func,'name')); the second one: $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); foreach($users $user){ echo name($user->id,$user->name); } i don't understand how pdo::fetch_func works. tried figure out. however, not well-documented. could please explain fetch mode? , also, 1 performs better? thank you. both methods wrong , have learn how use templates , how separate business logic presentation logic. $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); tpl::assign('users', $users); is code business logic part. then in template <?php foreach $users $row): ?> <div id="<?=$...
Read more

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

-
i read alot other solution still confused should mine... #include <opencv2/objdetect/objdetect.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <iostream> #include <stdio.h> using namespace std; using namespace cv; int main(int argc, const char** argv) { //create cascade classifier object used face detection cascadeclassifier face_cascade; //use haarcascade_frontalface_alt.xml library face_cascade.load("haarcascade_frontalface_alt.xml"); //setup video capture device , link first capture device videocapture capturedevice; capturedevice.open(0); //setup image files used in capture process mat captureframe; mat grayscaleframe; //create window present results namedwindow("outputcapture", 1); //create loop capture , find faces while (true) { //capture new image frame capturedevice >> captureframe; ...
Read more

The canvas has been tainted by cross-origin data in chrome only -

-
uncaught securityerror: failed execute 'getimagedata' on 'canvasrenderingcontext2d': canvas has been tainted cross-origin data i getting above error in chrome. code(following) works fine in mozilla. have not corss domain issue. why above error in chrome? var wheel_canvas, wheel_context, can_w, can_h, wheel_grd; var large_radius = 160; var small_radius = 120; var wheel_canvas = document.getelementbyid('wheel_canvas'); var wheel_context = wheel_canvas.getcontext('2d'); var can_w = $(wheel_canvas).width(); var can_h = $(wheel_canvas).height(); var centerx = can_w / 2, centery = can_h / 2; var wheel_grd = null; test('#ff0000'); function test(hex) { $('#clrpicker').css({'left': 210, 'top': 210 }); inverted = hexbw(hex); $('#color_val_show').val(hex); current_color_hex_val_selected = hex; $('#color_val_show').css({'color':inverted,'background':hex}); fillgradient...
Read more