Menu
I'm trying to write an if statement where if one of the elements has it's display set to "none", I want the parent element to also display "none"...
This is the code I'm trying, which doesn't work...
/* tried this first */
if($('#prevx a').attr('display') == 'none') {
$(this).parent().attr('display','none');
}
/* and then this */
if($('#prevxa > a').attr('display') == 'none') {
$('#prevxa').attr('display','none');
}
The markup looks like this:
<ul>
<li class="navnext" id="nextxa">
<a id="nextx" href="#"><img src="/images/next.png"/></a>
</li>
<li class="navprev" id="prevxa">
<a id="prevx" href="#" style="display: none;"><img src="/images/previous.png"/></a>
</li>
</ul>
822
The parents() method in jQuery is used to get all ancestor elements of the given selector. It is an inbuilt function in jQuery. This method traverses upwards from the parent element, all the level up in the DOM tree and returns all ancestors of the selected element.
The parent() method returns the direct parent element of the selected element. The DOM tree: This method only traverse a single level up the DOM tree. To traverse all the way up to the document's root element (to return grandparents or other ancestors), use the parents() or the parentsUntil() method.
jQuery parent() method is used to get the direct parent element of the selected HTML element. You can perform desired actions on the parent element once it Is returned. This is the syntax for using jQuery parent(): $("child").
It is a jQuery Selector used to select all elements that are the direct child of its parent element. Parameter Values: parent: Using this, the parent element will be selected. child: Using this, the direct child element of the specified parent element will be selected.
Try this:
if($('#prevx').css('display') == 'none') {
$('#prevx').parent().css('display','none');
}
Better yet:
$('#prevx').parent().css('display',$('#prevx').css('display'));
This example works for me. To hide/display the parent, toggle the child's display between none and inline:
<ul>
<li class="navnext" id="nextxa">
<a id="nextx" href="#"><img src="/images/next.png"/></a>
</li>
<li class="navprev" id="prevxa">
<a id="prevx" href="#" style="display: inline;"><img src="/images/previous.png"/></a>
</li>
</ul>
<script>
if ($('#prevx').css('display') == 'none')
$('#prevx').parent().css('display', 'none');
else
$('#prevx').parent().css('display', 'list-item');
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
