CODEWITHSUNDEEP
jquery
user1032531
user1032531

Reputation: 26281

Select closest element of given type above an element of given type

How can one select the closest element of given type which is above an element of a given type?

For instance...

this is currently $('#j1_95_anchor'), and I wish to select the <li> with an id of 15.0. Note that I currently don't have this id value.

<ul role="group" class="jstree-children" style="">
    <li role="treeitem" aria-selected="false" aria-level="3"
        aria-labelledby="15.0_anchor" aria-expanded="true" id="15.0" class="jstree-node jstree-open" aria-busy="false"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="15.0_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i>Volts_AB</a>
        <ul role="group" class="jstree-children" style="">
            <li role="treeitem" aria-selected="false" aria-level="4" aria-labelledby="j1_90_anchor" id="j1_90" class="jstree-node  jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="j1_90_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i>ID: 15</a></li>
            <li role="treeitem" aria-selected="false"
                aria-level="4" aria-labelledby="j1_91_anchor" id="j1_91" class="jstree-node  jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="j1_91_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i>Name: Volts_AB</a></li>
            <li role="treeitem" aria-selected="false"
                aria-level="4" aria-labelledby="j1_92_anchor" id="j1_92" class="jstree-node  jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="j1_92_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i>Description: Voltage Phase A-B</a></li>
            <li role="treeitem"
                aria-selected="false" aria-level="4" aria-labelledby="j1_93_anchor" id="j1_93" class="jstree-node  jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="j1_93_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i>Units: volts</a></li>
            <li role="treeitem" aria-selected="false"
                aria-level="4" aria-labelledby="j1_94_anchor" id="j1_94" class="jstree-node  jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="j1_94_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i>Type: Analog Input</a></li>
            <li role="treeitem" aria-selected="true"
                aria-level="4" aria-labelledby="j1_95_anchor" id="j1_95" class="jstree-node  jstree-leaf jstree-last">
                    <i class="jstree-icon jstree-ocl" role="presentation"></i>
                    <a class="jstree-anchor addPoint editable editable-click jstree-clicked" href="#" id="j1_95_anchor" data-original-title="" title=""><i class="jstree-icon jstree-themeicon glyphicon glyphicon-plus-sign jstree-themeicon-custom" role="presentation"></i>Add Point</a>
            </li>
        </ul>
    </li>
</ul>

The following will work, but I feel there is probably a more straight forward approach:

$(this).closest('ul').closest('li');

I was thinking there might be something like:

$(this).closest('ul > li');

Upvotes: 1

Views: 150

Answers (2)

Hassan Sadeghi
Hassan Sadeghi

Reputation: 1326

If I understand correctly, you can try this too:

 $(this).closest("[id='15.0']");

Also you can use this:

$(this).closest('ul.jstree-children').children("li");

And if you like tricky ways, look at code below:

$("this").closest("li:only-child")

Upvotes: 0

msg
msg

Reputation: 8171

The target li#15.0 contains parent ul of the element, so:

$(this).parents('li').last()

Answering strictly your question "element of given type above an element of given type" you can use:

$(this).closest('li:has(ul)')

Normal selectors apply.

Upvotes: 2

Related Questions