CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Stephen Whitmore
Stephen Whitmore

Reputation: 953

jQuery: Select grandparent's h1 tag

I'm working within a really rigid framework (NetSuite) and there's a small section that I have direct control over which is the h3 and p text below. The structure is similar to this:

<div class="grandparent">
    <h1>Title Text</h1>
    <div class="otherstuff">Some text</div>
    <div class="parent">
        <h3>Text I have control over</h3>
        <p>More text I have control over</p>
    </div>
</div>

I want to hide the title text and the contents of '.otherstuff' for this page. There are multiple pages similar to this so I'm looking for a clean way of getting it done.

I've tried giving the h3 tag a class, then the following:

$('h3.myclass').parent().closest('h1').css('display','none);

and variations of that but without any luck. I've looked into the .parentUntil() function but I run into the same problem. I have no problem grabbing ancestor elements but run into trouble when trying to grab elements of those ancestors.

Can anyone help me out?

EDIT: Thank you everyone for your time and effort in answering my question. I really appreciate it!

Upvotes: 0

Views: 2240

Answers (6)

Tomi
Tomi

Reputation: 116

closest() selects ancestors, what you want is siblings().

So:

$('.your_h3_class').parent().siblings('h1')

will return an array of h1 siblings of the parent div, and in your case the first item of that array is your h1.

And you can iterate through those and hide them (in case there is ever more than one)

Upvotes: 0

AmmarCSE
AmmarCSE

Reputation: 30597

  1. Use closest() to traverse up to the grandparent
  2. Use find() to select the desired elements
  3. You can use hide() in place of css('display', 'none') as they are equivalent

var grandparent = $('.myclass').closest('.grandparent');
grandparent.find('h1, .otherstuff').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="grandparent">
  <h1>Title Text</h1>
  <div class="otherstuff">Some text</div>
  <div class="parent">
    <h3 class="myclass">Text I have control over</h3>
    <p>More text I have control over</p>
  </div>
</div>

Upvotes: 9

guest271314
guest271314

Reputation: 1

have direct control over which is the h3

Try utilizing .parent() , .siblings()

$("h3").parent().siblings().hide(); // `$(".parent").siblings().hide();` ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

</script>
<div class="grandparent">
    <h1>Title Text</h1>
    <div class="otherstuff">Some text</div>
    <div class="parent">
        <h3>Text I have control over</h3>
        <p>More text I have control over</p>
    </div>
</div>

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

You may use:

$('.myclass').closest('.grandparent').find('>h1,>.otherstuff').hide();

> is for direct descendant element.

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78550

I can think of two selectors that might work assuming you put .myclass back in.

$('.myclass').closest('.grandparent').find('h1').css('display','none');

or

$('.myclass').parent().siblings('h1').css('display','none');

Upvotes: 2

BurningLights
BurningLights

Reputation: 2397

If the title is always immediately before the div with the "otherstuff" class, then you could use this:

$('.otherstuff').prev('h1').css('display', 'none');

Documentation here: https://api.jquery.com/prev/

Upvotes: -1

Related Questions