Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a dynamic troublesome website;
Wondering if I could write an if statement with jQuery or raw JS that would hide an element based on if another element is underneath it.
So something like; if an <h1> tag is directly beneath my div id, keep my div element present; all else display: none;
You can use not, has and first-child selector:
$('div:not(:has(>h1:first-child))').hide();
Demo: http://jsfiddle.net/c9emjotg/
You could use css to hide all the appropriate divs, then use jquery to show them if they contain an <h1>
$('h1').parent('.sometimesHeader').show();
.sometimesHeader {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="sometimesHeader">I don't have an h1</div>
<div class="sometimesHeader"><h1>H1 is here!</h1></div>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last month.
Improve this question
Can somebody help me with this problem? I'm trying to set the <li></li> HTML element to display: none; because I want to check if than the <ul></ul> will be empty.
Simply changing the li to "display: none" won't make the ul empty, as the li element is still inside it, even if it's not displayed. You will have to remove the li like so
$('li').remove()
In Chrome and Firefox, the ul still won't be recognized as empty if there is any whitespace or line breaks. If you're okay with these, add the following code
if ($('ul').children().length == 0) {alert ('empty')}
If you want to ensure the ul is completely empty with no whitespace or linebreaks, then add this instead
if ($('ul').is(':empty')) {alert ('empty')}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am creating custom HTML tags. I want to know if was possible to add CSS properties to HTML tags with JavaScript without adding, use css file or appear the "style" attribute on the HTML tag, example:
NO:
<-my-tag style="color:red">STACKOVERFLOW</-my-tag>
YES:
<-my-tag>STACKOVERFLOW</-my-tag>
And the result like this
You can create a style element in DOM and append anything to it which will automatically apply to your element
const appendStyle = (customStyles) => {
const styleEl = document.createElement('style');
styleEl.innterHTML = `yourTagName {${customStyles}}`;
document.body.appendChild(styleEl);
}
appendStyle('background-color: red; font-size: 15');
Yes you can either add a separate .css file and place there your styles.
Like style.css
yourTagName {
color: red;
}
And then include it within the <head></head> section of HTML using <link> or you could add your styles within the <style> tag in the <head> section as well.
Check W3 HTML Styles - CSS to learn more.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am trying to loop through an HTML page to check HTML elements with class="details" and then each element will that class with get an ID added to it. Of course the ID will be different for every HTML element that has class="details". Below is what I started to code, but I realized that if I have 20 HTML elements with class="details" that there has to be a way to loop or write less code to do what I want. Any help will be greatly appreciated.
$('.details').eq(0).attr('id' , 'cLc');
$('.details').eq(1).attr('id' , 'bLt');
Something like this?
$('.details').each(function(idx) {
$(this).attr('id', 'id-' + idx);
});
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
i need a javascript code that gets a hidden div by Id and changes the style from display:none; to display:block; .
HTML:
<div id="post-author" style="display:none;">by samuel</div>
every post in my site has that html code on beginning. how can i be able to print or show element by it's Id ? thanks !
<script>document.getElementById("post-author").style.display="block";</script>
This will do what you're after :) Just put that in the head of your site
This has been answered a million times before... but here you go:
document.getElementById('post-author').style.display = 'none';
and
document.getElementById('post-author').style.display = 'block';
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Whats the best "loop" if i want to move child nodes 1 by 1 from one div to others. At the end there are no more img's left in the div (#load), so i thought i can use
do { ... } while ($('#load img')!=0);
I sort the img elements into 3 div elements depending on the width of each div.
Which loop would be the best? And how?
You can use .each() of jquery for that
$('#load img').each(function (index) {
if(index==n)
{
//do something here
}
$(this).fadeOut();
});