#349 enhancement
dave mankoff

Allow Element.nextSiblings() to Take a CSS Rule

Reported by dave mankoff | September 18th, 2008 @ 06:56 PM | in 1.7

It would be incredible convenient if Element.nextSiblings() could take a CSS rule much like Element.next() does. The same can be said for Element.previousSiblings(). It actually seems kind of inconsistent to me that they don't currently accept CSS.

I have mimicked this behavior in my code with the following call:

el.nextSiblings().findAll(function(e) { return e.match(css); });

Comments and changes to this ticket

  • Juriy Zaytsev

    Juriy Zaytsev September 18th, 2008 @ 09:12 PM

    • State changed from “new” to “enhancement”
    • Tag changed from element, enhancement, nextsiblings, previoussiblings, selector to element, needs_patch, needs_tests, nextsiblings, previoussiblings, selector
    • Milestone set to 1.7

    This reminds me of http://dev.rubyonrails.org/ticke... If we were to make such change, it would need to be added to all of the "traversal" methods - ancestors, childElements, siblings, nextSiblings and previousSiblings.

  • dave mankoff

    dave mankoff September 19th, 2008 @ 12:42 AM

    Interesting. It's worth noting that adding this to ancestors would make it identical to select, but I don't disagree with you.

  • Juriy Zaytsev

    Juriy Zaytsev September 19th, 2008 @ 01:03 AM

    @dave

    Not quite : ) Adding this to descendants (not ancestors) would be identical to select. To have ancestors-like functionality you would need to do something like:

    
    someElement.ancestors().grep(new Selector(cssExpression));
    

    Which is clearly quite verbose comparing to:

    
    someElement.ancestors(cssExpression);
    
  • Xanadu

    Xanadu September 26th, 2008 @ 01:07 AM

    I was about to create ticket to request the same feature for Element.ancestors(), can't wait for this feature.

  • Juriy Zaytsev

    Juriy Zaytsev September 26th, 2008 @ 01:48 AM

    I didn't check the performance (there is probably a more efficient way) but here's an initial idea:

    
    recursivelyCollect: (function(){
        var matcher = { match: function(){ return true } };
        return function(element, property, cssExpression) {
          cssExpression = cssExpression ? new Selector(cssExpression) : matcher;
          element = $(element);
          var elements = [];
          while (element = element[property])
            if (element.nodeType == 1 && cssExpression.match(element))
              elements.push(Element.extend(element));
          return elements;
        }
      })(),
    
      ancestors: function(element, cssExpression) {
        return Element.recursivelyCollect(element, 'parentNode', cssExpression);
      },
    
      previousSiblings: function(element, cssExpression) {
        return $(element).recursivelyCollect('previousSibling', cssExpression);
      },
    
      nextSiblings: function(element, cssExpression) {
        return $(element).recursivelyCollect('nextSibling', cssExpression);
      },
    

    Afaik, this will not work with complex selectors, since new Selector only understands simple ones.

  • Pedro De Almeida

    Pedro De Almeida July 9th, 2009 @ 05:58 PM

    This is exactly what I was looking for!

    @kangax: I integrated your solution into Prototype 1.6.1_rc3 and it seems to perform well. But are you aware of some incompatibility as this ticket is pretty old?

  • Dan Dean

    Dan Dean July 17th, 2009 @ 08:52 AM

    +1 for this.

    Not allowing a css selector for all of the traversal methods has always seemed quite odd to me.

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:11 AM

    • Tag changed from element, needs_patch, needs_tests, nextsiblings, previoussiblings, selector to element, needs_patch, needs_tests, section:dom

    [not-tagged:"dom" tagged:"section:dom" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:12 AM

    • Tag changed from element, needs_patch, needs_tests, section:dom to needs_patch, needs_tests, section:dom

    [not-tagged:"element" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:26 AM

    • Tag changed from needs_patch, needs_tests, section:dom to missing:tests, needs_patch, section:dom

    [not-tagged:"needs_tests" tagged:"missing:tests" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:28 AM

    • Tag changed from missing:tests, needs_patch, section:dom to missing:patch, missing:tests, section:dom

    [not-tagged:"needs_patch" tagged:"missing:patch" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 03:36 AM

    • Tag changed from missing:patch, missing:tests, section:dom to missing:patch, needs:tests, section:dom

    [not-tagged:"missing:tests" tagged:"needs:tests" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 03:37 AM

    • Tag changed from missing:patch, needs:tests, section:dom to needs:patch, needs:tests, section:dom

    [not-tagged:"missing:patch" tagged:"needs:patch" bulk edit command]

  • T.J. Crowder

    T.J. Crowder November 16th, 2009 @ 04:50 PM

    [responsible:none bulk edit command]

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

The Prototype JavaScript library.

Shared Ticket Bins

Pages