Author Topic: JQuery Help  (Read 3567 times)

ober

  • Ashton Shagger
  • Ass Wipe
  • Posts: 14305
  • Karma: +73/-790
  • mini-ober is taking over
    • Windy Hill Web Solutions
JQuery Help
« 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?

Mike

  • Jackass In Charge
  • Posts: 11248
  • Karma: +168/-32
  • Ex Asshole - a better and more caring person.
Re: JQuery Help
« Reply #1 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);

ober

  • Ashton Shagger
  • Ass Wipe
  • Posts: 14305
  • Karma: +73/-790
  • mini-ober is taking over
    • Windy Hill Web Solutions
Re: JQuery Help
« Reply #2 on: October 25, 2011, 03:37:26 PM »
That's correct and it will always be there.  Thanks, I'll give that a whirl.

ober

  • Ashton Shagger
  • Ass Wipe
  • Posts: 14305
  • Karma: +73/-790
  • mini-ober is taking over
    • Windy Hill Web Solutions
Re: JQuery Help
« Reply #3 on: October 25, 2011, 04:22:16 PM »
Perfect, thanks Mike!

micah

  • A real person, on the Internet.
  • Ass Wipe
  • Posts: 6915
  • Karma: +58/-55
  • Truth cannot contradict truth.
    • micahj.com
Re: JQuery Help
« Reply #4 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).
"I possess a device, in my pocket, that is capable of accessing the entirety of information known to man.  I use it to look at pictures of cats and get in arguments with strangers."

Mike

  • Jackass In Charge
  • Posts: 11248
  • Karma: +168/-32
  • Ex Asshole - a better and more caring person.
Re: JQuery Help
« Reply #5 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.
« Last Edit: January 31, 2013, 10:21:58 AM by Mike »

Perspective

  • badfish
  • Jackass In Charge
  • Posts: 4635
  • Karma: +64/-22
    • http://jeff.bagu.org
Re: JQuery Help
« Reply #6 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.

Mike

  • Jackass In Charge
  • Posts: 11248
  • Karma: +168/-32
  • Ex Asshole - a better and more caring person.
Re: JQuery Help
« Reply #7 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/

micah

  • A real person, on the Internet.
  • Ass Wipe
  • Posts: 6915
  • Karma: +58/-55
  • Truth cannot contradict truth.
    • micahj.com
Re: JQuery Help
« Reply #8 on: January 31, 2013, 10:29:45 AM »
Thanks Mike, thats exactly what I was missing!

I owe you a drink  :thumbsup:
"I possess a device, in my pocket, that is capable of accessing the entirety of information known to man.  I use it to look at pictures of cats and get in arguments with strangers."