Question

I’ve built a JQuery plugin that will apply to a page built in a CMS.

Today the client broke the plugin (which expands a given area based on a click) by adding a <div> into the area I’ve given them access to editing.

The issue with this is that my small JQuery script applies some stuff to:

$("div#holders div")

My HTML structure is like this:

<div id="holders">
    <div>editable area</div>
    <div>editable area</div>
    <div>editable area</div>
    <div>editable area</div>
    <div>editable area</div>
</div>

Where editable area is a separate area in my CMS of choice that the client can update.

How can I make my JQuery selector above only select the immediate <div> descendants of div#holders and ignore <div>s within those?

Answer 1

Try this:

$("#holders > div")

See here for more info: http://api.jquery.com/child-selector/