Making jQuery Code More Correct/ Efficient -

-

hey! i've started feeling comfortable using jquery, i'm trying improve write code. there me make code more efficient?

$("a.more_info").toggle(function(){       var itemid = $(this).parent().parent().parent().parent().attr('id');       var itemid_hash = "#" + itemid + " .details_exp";       var itemid_tog_more = "#" + itemid + " a.more_info";       $(itemid_tog_more).addclass("less_info").removeclass("more_info");       $(itemid_hash).fadein(); }, function () {       var itemid = $(this).parent().parent().parent().parent().attr('id');       var itemid_hash = "#" + itemid + " .details_exp";       var itemid_tog_less = "#" + itemid + " a.less_info";       $(itemid_tog_less).addclass("more_info").removeclass("less_info");       $(itemid_hash).fadeout(); });

first, there way go 4 levels in dom without stacking .parent() 4 times? second, there better way define "itemid" , " itemid_hash" variables don't have redefine them second half of toggle function? code working great is, want make sure i've doing things in correct way. thanks!

update 2: working demo.

update: completeness, html i'm referring (only relevant part):

<div class="work">     <div class="details">         <nav>             <a href="#" class="prev">prev</a>             <a href="#" class="more_info">more info</a>             <a href="#" class="next">next</a>         </nav>         <div class="details_exp" style="display: none; ">             <!-- content here --->         </div>     </div>     <!-- ... --> </div>

you can this:

$("a.more_info").toggle(function(){       $(this).addclass("less_info").removeclass("more_info");       // $(this).parent().nextall('.details_exp').fadein() work       $(this).closest('.work').find('.details_exp').fadein(); }, function () {       $(this).addclass("more_info").removeclass("less_info");       $(this).closest('.work').find('.details_exp').fadeout(); });

there no need build selectors manually. , think item_tog_less refers clicked element right? can use $(this).

if box details comes after link (more precisely parent, looked this) can do:

$(this).parent().nextall('.details_exp').fadein();

reference: find(), closest(), nextall()

p.s.: nice site!


Comments

Post a Comment

Popular posts from this blog

android - Spacing between the stars of a rating bar? -

-
ho can set spacing beween stars? thats ratingbar: ratingbar = (ratingbar) inflater.inflate(r.layout.ratingbar, null); ratingbar.setlayoutparams(new layoutparams(layoutparams.wrap_content, layoutparams.wrap_content)); the layout: <?xml version="1.0" encoding="utf-8"?> <ratingbar xmlns:android="http://schemas.android.com/apk/res/android" style="@style/mystyle" android:layout_alignparentright="true" android:layout_height="19dp" android:layout_width="wrap_content" android:numstars="5"> </ratingbar> the style: <style name="mystyle" parent="@android:style/widget.ratingbar"> <item name="android:progressdrawable">@drawable/android_r2_ratingstar_yellow</item> <item name="android:indeterminatedrawable">@drawable/android_r2_ratingstar_grey</item> </style> thanks, cheers you have
Read more

aspxgridview - Devexpress grid - header filter does not work if column is initially hidden -

-
i'm using devexpress grid , i'm trying 'country' column display header filter properly: <dx:gridviewdatacolumn caption="country" fieldname="countryname" showincustomizationform="true" visible="false"> <settings allowheaderfilter="true"/> </dx:gridviewdatacolumn> if 'country' column set visible='true', header filter displayed should(it shows value option list). however, want 'country' column hidden, available in customization window(like in code above). in case, when column dragged outside customization window , grid , header filter clicked, javascript error encountered: element null element.addeventlistener(eventname, func, true); is known bug? there workarounds? set aspxgridview.settings.showheaderfilterbutton property true resolve problem. the following markup works fine me (i using dxperience 10.1.7): <asp:accessdatasource id="accessda
Read more

c# - How to execute a particular part of code asynchronously in a class -

-
i creating speech recognition engine that's going respond user commands.i have created button enable , disable speech recognition per user convenience.i have used dispose() of speech engine disable speech recoginition.here code private void button1_click(object sender, routedeventargs e) { engineon = !engineon; if (engineon) { speechengine = speech.createspeechengine(); //speech class creates , returns new speech engine. speechengine.audiolevelupdated += new eventhandler<audiolevelupdatedeventargs>(speechengine_audiolevelupdated); // use system's default microphone speechengine.setinputtodefaultaudiodevice(); speechengine.loadgrammar(new dictationgrammar()); // start listening speechengine.recognizeasync(recognizemode.multiple); } else { speechclass.myengine.dispose(); } } but disposal of speech obj
Read more