• title

    • title

    • " />
      • title

      • title

      • " />
        • title

        • title

        • "/>

          TechQA.

          Find closest parent in relation to (not just contained within) a context

          1.1k views Asked by wheresrhys At 2011-02-25T14:49:15+00:00 25 February 2011 at 14:49 2025-12-25T06:47:05+00:00

          With the following html

          <ul id="accordion">
              <li>
                  <ul>
                      <li><h3>title</h3></li>
                  </ul>
              </li>
              <li>
                  <ul>
                      <li><h3>title</h3></li>
                  </ul>
              </li>
              <li>
                  <ul>
                      <li><h3>title</h3></li>
                  </ul>
              </li>       
          </ul>
          

          I have the outer ul stored in a variable

          var acc = $("#accordion")[0]  
          

          in the general case I am just passed the DOM element and can't necessarily specify a selector

          When a h3 is clicked I want to get the top level li that contains it. In the general case there could be any kind of markup between the accordion ul and the element I wnat to fetch, and between the element to fetch and the h3... but what I will have is a selector that lets me get to the element from the accordion using the ">" selector.

          e.g. var items = $(">li", acc);

          The trouble is that when I start from a clicked h3 ("this" inside the click handler) It's difficult to find the specific item.

          $(this).closest(">li", acc);
          

          returns an empty jQuery (maybe a bug? although it's difficult to define what ">" means in this instance, where the top level element is dynamic)

          $(this).parents(">li")
          

          doesn't allow a context to be set, so could potentially return too many elements

          Is there a way to do what I want?

          *edit: html now makes the problem clearer

          javascript jquery dom ancestor
          Original Q&A
          4

          There are 4 answers

          0
          wheresrhys wheresrhys On 2011-02-26T08:48:08+00:00 26 February 2011 at 08:48 BEST ANSWER
          $(">li",acc).has(this)
          

          works in general; setting a context on an initial jQuery appears to be the only place that startinga selector with ">" works in jQuery

          2
          naivists naivists On 2011-02-25T14:51:51+00:00 25 February 2011 at 14:51

          How about $(h3).closest(".item"); ? According to "closest" documentation, it will traverse the DOM up from current node until it finds a node that matches your selector.

          6
          David Tang David Tang On 2011-02-25T15:21:38+00:00 25 February 2011 at 15:21

          Go the other way, to guarantee the child relationship:

          acc.children('li').has(this);
          
          1
          james goldswain james goldswain On 2011-02-25T16:07:59+00:00 25 February 2011 at 16:07
          jQuery(this).parents('li:last');
          

          Related Questions in JAVASCRIPT

          • Using Puppeteer to scrape a public API only when the data changes
          • inline SVG text (js)
          • An array of images and a for loop display the buttons. How to assign each button to open its own block by name?
          • Storing the preferred font-size in localStorage
          • Simple movie API request not showing up in the console log
          • Authenticate Flask rest API
          • Deploying sveltekit app with gunjs on vercel throws cannot find module './lib/text-encoding'
          • How to request administrator rights?
          • mp4 embedded videos within github pages website not loading
          • Scrimba tutorial was working, suddenly stopped even trying the default
          • In Datatables, start value resets to 0, when column sorting
          • How do I link two models in mongoose?
          • parameter values only being sent to certain columns in google sheet?
          • Run main several times of wasm in browser
          • Variable inside a Variable, not updating

          Related Questions in JQUERY

          • In Datatables, start value resets to 0, when column sorting
          • Bootstrap modal not showing at the desired position on a web page when the screen size is smaller
          • window.location.href redirects but is causing problems on the webpage
          • Using JQuery Date Slider
          • Storing selected language in localStorage
          • How to stop other divs from still showing when i click a different button?
          • Check multiple values with jQuery
          • Bootstrap component does not want to render in Datatables function
          • put white spaces when entering an amount moneytype symfony
          • Trouble accessing custom header in AJAX response using jQuery in Fiware Keyrock
          • I just cant make it work, HTML, JS and Firebase error
          • Didn't declared variable still not getting any error in JavaScript
          • Move element horizontally while scrolling vertically in pure JavaScript
          • allow multi carousel in same page
          • Embedded TikTok posts / thumbnail styling issue

          Related Questions in DOM

          • Is 'div' a Parameter or an Argument in JavaScript's document.createElement Method?
          • PHP Dom merge documents
          • Unable to Login through Automation(Cypress) to app, while the credentails are true. It allows manual login but unable to login through Cypress
          • How do I test a color value in Javascript?
          • How to Sort DOM elements according to the elements of another array?
          • DOM is not being uploaded for my Etch-A-Sketch board
          • Any HTML standards to limit resource of the HTML content?
          • how to make a pop under tab in mobile version
          • Unable to load text from textarea to docx
          • EventListener is not being added to button elements
          • Get SVG Path Point Position Relative to DOM (not parent SVG)
          • Using HTML, CSS and JavaScript Fetch to make a POST request to an API service
          • Can someone explain why this happen?
          • How do content attributes and IDL attributes interact?
          • React js parse with content between html strips

          Related Questions in ANCESTOR

          • How to match ancestor-or-self for contains Xpath?
          • LogicException: The selected node does not have a form ancestor
          • Shopware App - "Refused to frame 'https://***.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors
          • How to add class to current and parent menu items if menu contains pages and categories that have the same ID?
          • Get ancestors of all nodes in a graph
          • How to get a predecessors/ancestor list of a node from cyclic directed graph in python?
          • XSLT sum of multiplication with ancestor
          • XPath test if any ancestor has a specific child element
          • How to locate the grandparent of elements using Selenium (Python) in a loop
          • Need to identify the ancestor of the mentioned web element
          • Ancestor of a comment object
          • After upgrading to flutter 2.10: appears widget's ancestor is unsafe
          • Does git rebase ever require a common commit ancestor?
          • SVN ancestrally related error on a single directory
          • How do I change a &Path's first ancestor in Rust?

          Popular Questions

          • How do I undo the most recent local commits in Git?
          • How can I remove a specific item from an array in JavaScript?
          • How do I delete a Git branch locally and remotely?
          • Find all files containing a specific text (string) on Linux?
          • How do I revert a Git repository to a previous commit?
          • How do I create an HTML button that acts like a link?
          • How do I check out a remote Git branch?
          • How do I force "git pull" to overwrite local files?
          • How do I list all files of a directory?
          • How to check whether a string contains a substring in JavaScript?
          • How do I redirect to another webpage?
          • How can I iterate over rows in a Pandas DataFrame?
          • How do I convert a String to an int in Java?
          • Does Python have a string 'contains' substring method?
          • How do I check if a string contains a specific word?

          Trending Questions

          • UIImageView Frame Doesn't Reflect Constraints
          • Is it possible to use adb commands to click on a view by finding its ID?
          • How to create a new web character symbol recognizable by html/javascript?
          • Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
          • Heap Gives Page Fault
          • Connect ffmpeg to Visual Studio 2008
          • Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
          • How to avoid default initialization of objects in std::vector?
          • second argument of the command line arguments in a format other than char** argv or char* argv[]
          • How to improve efficiency of algorithm which generates next lexicographic permutation?
          • Navigating to the another actvity app getting crash in android
          • How to read the particular message format in android and store in sqlite database?
          • Resetting inventory status after order is cancelled
          • Efficiently compute powers of X in SSE/AVX
          • Insert into an external database using ajax and php : POST 500 (Internal Server Error)
          • Privacy
          • Terms
          • Cookies
          • Homegardensmart
          • Aftereffectstemplates
          • Jogjafile