EntropySink

Technical & Scientific => Programming => Topic started by: ober on October 25, 2011, 03:14:45 PM

Title: JQuery Help
Post by: ober on October 25, 2011, 03:14:45 PM

I have a need for the following:

I'm passing a value into a JS function and I need to say:

If this value is in x select box, set the value of that select box to the value I'm passing in.  If the value is not in that select box (exactly as passed in), add 'type-' to the value passed in and set the select box to that.

How do I do that in JQuery?

Title: Re: JQuery Help
Post by: Mike on October 25, 2011, 03:26:55 PM

Ok just making sure I understand you:

I pass 'Foo'.
If there is an option with the value of 'Foo' make that the selected option.  If there isn't an option with the value of 'Foo' then make the option with the value of 'type-Foo' the selected option.

If 'type-Foo' doesn't exist should it create it or will we guarantee that it is there before hand?

Easy method I think would be:

Code: [Select]

var value = 'Foo';

$('#SELECTID').val(value);
if ($('#SELECTID').val() != value)
  $('#SELECTID').val('type-' + value);


Title: Re: JQuery Help
Post by: ober on October 25, 2011, 03:37:26 PM

That's correct and it will always be there.  Thanks, I'll give that a whirl.

Title: Re: JQuery Help
Post by: ober on October 25, 2011, 04:22:16 PM

Perfect, thanks Mike!

Title: Re: JQuery Help
Post by: micah on January 31, 2013, 09:24:59 AM

I've been trying to simplify some code (mostly because its dynamically generated by javascript and the less HTML I have to print, the better) and as such have been taking out a lot of id="" values and instead giving similar elements a class and then using jQuery's powerfull selector methods to access each instance as needed*. This has served me fairly well but I'm kinda stuck right now.

 I have an HTML block that looks something this:

Code: [Select]

<div data-id="1">
  <div class="the_element_I_want">...</div>
</div>
<div data-id="2">
  <div class="the_element_I_want">...</div>
</div>
and I want to select the child element (by class) of a given parent (by attribute, namely "data-id")

I had this and thought it was working:

Code: [Select]

$('.the_element_I_want, [data-id=1]') but when I started adding more div's with more data-id attributes I realized I wasn't selecting the specific child but all the elements with that class.

Any thoughts on how I can accomplish this?

*I know that this creates a bit more overhead for javascript and isn't as fast as accessing an element by ID, but the difference is miniscule compared to the ease of cleaner HTML (which is being stored in a javascript string).

Title: Re: JQuery Help
Post by: Mike on January 31, 2013, 09:34:00 AM

Try:

Code: [Select]

$('.the_element_I_want', '[data-id=1]')Note the the quote and comma position differences

or you could use filter():

Code: [Select]

$('[data-id=1]').filter(function(){return $(this).hasClass('the_element_I_want');})
edit: The filter would only work on direct children.

Title: Re: JQuery Help
Post by: Perspective on January 31, 2013, 10:11:48 AM

>Note the the quote and comma position differences

Care to elaborate? I'm just curious. I've never used any of this stuff but would like to learn it some day.

Title: Re: JQuery Help
Post by: Mike on January 31, 2013, 10:20:51 AM

sure:

To make things easier to read and type let's replace .the_element_I_want with X and [data-id=1] with Y

Micah's post had: $('X, Y') which is a single CSS-ish selector expression which will get elements that are either X or Y.

My post had $('X', 'Y') which uses the jQuery function parameters which says "Find elements X which are in the context of Y".  So it'll find elements that match Y and then search its descendants for X and return those.

See: http://api.jquery.com/jQuery/

Title: Re: JQuery Help
Post by: micah on January 31, 2013, 10:29:45 AM

Thanks Mike, thats exactly what I was missing!

I owe you a drink  :thumbsup: