Search jQuery

jQuery Forum

Help - Chain simple functions together

in Getting Started • 11 years ago

I need help to do the following:

For all <p> elements that contain X in class name
     Find first <div> element after above <p> alement
     Find first child <a> element of above <p>
               Set onclick function for that <a> element to toggle(<div>) element found above

So in the following HTML code

<p class='foo_1'>
<a> bar </a>      // a1
</p>
<div></div>         // div1

<p class='foo_2'>
<a> bar </a>      // a2
</p>
<div></div>         // div2

When i click on a1 i want function toggle to be called for div1, and when i click on a2 i want function toggle to be called for div2.

I hope I phrased my question good enough so everyone can understand it. Any help would be greatly appreciated. Thanks

Replies(7)

kenirwin

Re: Help - Chain simple functions together

11 years ago

I think you want the .next() selector to move from one element to the next. In my test, I wrapped the whole thing in a named div:

$(function() {

$('#main a').click(function() {

$(this).parent().next().toggle(); // this = a, parent = p, next = div

});

</script>

</p>

<div>Content 1 //div1</div>

</p>

<div>Content 2 // div2</div>

</div>

uros88

Re: Help - Chain simple functions together

11 years ago

Thanks, simple and straightforward. I didnt even know there was a toggle function in jquery. Also, seems i had a very wrong idea about how jquery works. What can i say, im just getting into it, and no time to do in the right way :)

I just have one follow up question: how could i assign a new function to an element, for example <div>, so i could write $(this).parent().next().newFunc(); This build-in toggle doesnt exactly suit my needs.

Godsbest

Re: Help - Chain simple functions together

11 years ago

Did you mean an actual 'X' or X was a placeholder for say 'foo'? The following should also work without changing your html:

$(function() {
$('p[class^=foo_] a:first').click(function() {
$(this).parent().next().toggle();
});
});

As for your second question, please note that functions are assigned to events; that's why these functions are called event handlers or callback functions. The functions are called when the event occurs. You can read more about events here: http://api.jquery.com/category/events/.

What do you mean by the "build-in toggle doesnt exactly suit my needs."? What would you like 'your toggle' to do?

uros88

Re: Help - Chain simple functions together

11 years ago

Thats pretty much the code ive compiled from the previous answer, and it works like a charm. The only problem is the toggle function.

The client requested "toggle" to gradually decrease opacity and to "roll" only on vertical axis, "bottom-up" so to say, so i would prefer to implement my own function to do that. Thats why i asked how i can define my own function, e.g. "rollup()", and how do i bind that function to <div> element (or all elements?) so i can call it like $(this).parent().next().rollup();

Again, thanks for the effort guys, i appreciate it :)