How to minimize/colocate similar DOM selector strings in jQuery code?
Code style advice, please:

**I want to prevent the distribution of selector strings, especially similar bases, throughout my code.**  This is currently increasing maintenance load and defects.

    function fn1() {
      $("#formId ul.sectionClass li.statusFlag").doSomething;
      $("#formId ul.sectionClass li.otherStatusFlag").doSomeOtherThing;
      doSomethingToGroup("#formId ul.sectionClass");
      doSomethingToOtherGroup("#formId ul.otherSectionClass");
    }

    function doSomethingToGroup(selector) {
      $("#formId>.statusBar").html(summarize(selector));
      $(selector).doMore();
    }

    function classesLikeIds() {
      $("#formId .item1").doOneThing();
      $("#formId .item2").doAnotherThing();
    }

    ...etc.

*Functionally*, I'm comfortable my code is fairly DRY.  Divisions of responsibility are healthy, etc.  But I still have selector strings scattered throughout my code that are difficult to maintain.

Additionally, maybe it is bad or controversial, but I try to minimize unique IDs in my HTML, even sometimes using classes like IDs (beneath top-level element IDs).  For example $("#appName form .header"), rather than $("#appNameHeader").  Why? If an app has 100 IDs in it, bad stuff happens in my experience. Two quick examples: 1) mashing-up apps becomes fraught with name collision danger, 2) it is harder to intuit the impact of style changes on child elements.

I've thought about something as simple as a named array of selectors:

    AppName.Selectors = {
      form: "#formId",
      statusBar: "#formId .statusBar",
      activeItems: "#formId ul.sectionClass li.statusFlag",
      inactiveItems: "#formId ul.sectionClass li.otherStatusFlag"
    }

That seems more maintainable, but still not ideal.

**What do you do?**


Thanks,  
Shannon
How to minimize/colocate similar DOM selector strings in jQuery code?
===

Code style advice, please:

**I want to prevent the distribution of selector strings, especially similar bases, throughout my code.**  This is currently increasing maintenance load and defects.

    function fn1() {
      $("#formId ul.sectionClass li.statusFlag").doSomething;
      $("#formId ul.sectionClass li.otherStatusFlag").doSomeOtherThing;
      doSomethingToGroup("#formId ul.sectionClass");
      doSomethingToOtherGroup("#formId ul.otherSectionClass");
    }

    function doSomethingToGroup(selector) {
      $("#formId>.statusBar").html(summarize(selector));
      $(selector).doMore();
    }

    function classesLikeIds() {
      $("#formId .item1").doOneThing();
      $("#formId .item2").doAnotherThing();
    }

    ...etc.

*Functionally*, I'm comfortable my code is fairly DRY.  Divisions of responsibility are healthy, etc.  But I still have selector strings scattered throughout my code that are difficult to maintain.

Additionally, maybe it is bad or controversial, but I try to minimize unique IDs in my HTML, even sometimes using classes like IDs (beneath top-level element IDs).  For example $("#appName form .header"), rather than $("#appNameHeader").  Why? If an app has 100 IDs in it, bad stuff happens in my experience. Two quick examples: 1) mashing-up apps becomes fraught with name collision danger, 2) it is harder to intuit the impact of style changes on child elements.

I've thought about something as simple as a named array of selectors:

    AppName.Selectors = {
      form: "#formId",
      statusBar: "#formId .statusBar",
      activeItems: "#formId ul.sectionClass li.statusFlag",
      inactiveItems: "#formId ul.sectionClass li.otherStatusFlag"
    }

That seems more maintainable, but still not ideal.

**What do you do?**


Thanks,  
Shannon