jquery - how to set parent attribute?

Question

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>

Answer 1

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>

Answer 2

.attr is used for tags such as id, title, alt, src, etc.

.css is used for CSS styles such as display, font, text-decoration: blink, etc.

Pygorex1's solution ought to do the trick.

Answer 3

if($('#prevx a').css('display') === 'none') {
    $(this).parent().css('display','none');
}

Answer 4

From your code examples, you already have an ID for the parent, so why not use it?

Also, there are many other ways to do this (wrap the lines below inside a $(document).ready(function(){...})) to make them work:

Using a :hidden selector (this will only hide):

if ($('#prevx').is(':hidden')) $('#prevxa').hide();

Use a ternary operator (this will hide or show the parent)

var showOrHide = ($('#prevx').is(':hidden')) ? 'none' : '';
$('#prevxa').css('display', showOrHide);

JQuery uses a few shortcuts:

• :hidden will find objects that are hidden (or are set to display: none). It doesn't have to be inside an .is() either. You can use this: $('div:hidden').show() to reveal all hidden divs.
• :visible will find objects that are not hidden (display = '', 'inline', 'block', etc)
• $(element).hide() will hide an element (sets display to none)
• $(element).show() will show an element (clears display value)