I am trying to have a li element and a div be "inline", but right now the div text keeps being put right below the li element. I'm using display: inline block and jQuery as below:
$('#list').append(
'<div class="spanish">\
<li>'+new_task+'</li>\
<div>Test</div>\
</div>');
.spanish {
display:inline-block;
}
As #ValeriySiestov mentioned, div is a block element, and li is a block element as well.
One way to fix your problem is to change the structure of the html you are appending, so it is a span element within the li element.
Note that list elements (i.e. uls or ols) can only have lis as their children, but lis can have anything as their children. Reference: Can I use a div inside a list item?
Assuming you have an unordered list with id #list, you can append a new list item to it like so:
var new_task = "walk the dog"
var li_string = `<li>${new_task}: <span>Test</span></li>`
$('#list').append(li_string);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li>make bed</li>
<li>brush teeth</li>
</ul>
Note the variable new_task is being interpolated within the string of html being appended to the list using template literals.
Template literals syntax:
string text ${expression} string text
div - is a block (display: block) element by default. It stretches to 100% of parent's width
li - is an item of the list (display: list-item) and also stretches to 100% of parent's width
If you want to change this behaviour, you need to add to div and li another display value, like this
.spanish div, .spanish li {
display: inline;
}
or
.spanish div, .spanish li {
display: inline-block;
}
In your code, you use inslide , this is not actualy right, this is not critical, it will work, but must be inside
It seems from you code. You want to print div below li. There are few things to note:
Li should always come inside UL or OL tag. You current code is semantically wrong.
There can be only Li come as sibling of Li. No any other tag (You are using div)
For position use css.
Please check below answer if its helpful to you.
$( document ).ready(function() {
var new_task = "<div class='row'>row</div>";
$('#list').append(
'<div class="spanish">\
<ul>\
<li>'+new_task+'<div class="sub-row">Test</div></li>\
</ul>\
</div>');
});
.row {
display: inline;
clear:both:
widht:100%
}
.sub-row {
display:inline;
clear:both;
margin-left:2px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list"></div>
Related
I am trying to add a class to a list element, only if it consists of a strong element within the li opening and closing brackets. I feel like I'm pretty close but that I am missing something.
Here's the code that I've got so far:
$('.section-header__subtext ul li').each(function() {
if ($(this).is('strong')) {
$(this).addClass('selected');
}
});
Thanks in advance!
As li can't ever be strong, thus $(this).is('strong') will always be false, hence the CSS class is not added to the element.
You can use :has() selector
Selects elements which contain at least one element that matches the specified selector.
$('.section-header__subtext ul li:has(strong)').addClass('selected');
$('.section-header__subtext ul li:has(strong)').addClass('selected');
.selected {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-header__subtext">
<ul>
<li>1</li>
<li><strong>2</strong></li>
<li>3</li>
<li><strong>4</strong></li>
</ul>
</div>
I think this is what you are looking for. jQuery find() searches in the given element. The .length part will return the amount of elements found.
$('.section-header__subtext ul li').each(function() {
if ($(this).find('strong').length > 0) {
$(this).addClass('selected');
}
});
$('.section-header__subtext ul li').each(function() {
if ($(this).find('strong').length > 0) {
$(this).addClass('selected');
}
});
Use find() method to search for elements inside of another one.
have a code structure like this :
<ul class="ulNotif">
<span id="notiftype1"></span>
<span id="notiftype2"></span>
<span id="notiftype3"></span>
</ul>
I sent li with jquery to each span. Every span will have li if the data match with the condition.
I tried to count with $(".ulNotif span li").length but still 0 value.
How to count span which have li inside it with javascript? Thanks
#junkfoodjunkie is correct. You should use <li> tags as direct descendants of <ul>. Nonetheless, your code should look like this:
$(".ulNotif span li").length
Your <ul> has a .class, not an #ID
EDIT: This works totally find for me: returns 3
$('.ulNotif span').each((index, child) => {
$(child).append('<li>')
})
console.log($('.ulNotif span li').length)
I have a mouseover function that changes the background-color of the span of an li element, but the background-color change only changes the background of the span text and not the entire length column. How can I extend the background-color to the entire length of the column without changing the li element's background-color. I do not want to change the li element's background-color because the li element may contain children ul and li elements who's background color I do not want to change.
JSFiddle: https://jsfiddle.net/8d965kbd/
HTML:
<li>
<span class="text">HIGHLIGHT FULL LENGTH (DO NOT HIGHTLIGHT WITH BELOW HIGHTLIGHT)</span>
<ul>
<li>
<span class="text">HIGHLIGHT FULL LENGTH (DO NOT HIGHTLIGHT WITH ABOVE HIGHTLIGHT)</span>
</li>
</ul>
</li>
jQuery:
$(function(){
$(document).on({
mouseenter: function () {
$(this).css('background-color', 'green');
},
mouseleave: function () {
$(this).css('background-color', 'white');
}
}, ".text");
});
May be something like this : https://jsfiddle.net/vtoe5eqx/1/
display:inline-block; //add it to the text class
You can add display:block; onto the span.
https://jsfiddle.net/8d965kbd/3/
Instead of using <span> use <div> instead, the reason is that <span> is just an inline-block element while <div> is a block element.
Meaning <span> width is default to auto which will only base its width on the content while <div> will set its width to 100% regardless of the content, that's why when you apply a background-color change for <span>, it only fills up only by its width.
Update: You can also use other block elements as an alternative aside from <div> such as <p> <h1> ~ <h6>
What i'm trying to accomplish is this:
I have a parent div which has multiple childs. I don't want to display the parent only the children. If I do this:
.navbar-default, #filters, #options {
display: none;
}
div#filter_date {
display: block;
}
Then it just doesn't show the the parent div with its children.
I have tried to make the question as easy as possible.
You cannot accomplish this the way you anticipate, as styles are inherited.
Your only solution would be to override the print styles for the parent to give the impression it was being hidden, e.g set any border to none, remove any background colors or images, remove padding, margin etc. Take whatever styles you have applied for the parent, and in your print CSS override them with properties which will provide the illusion the parent isnt in place.
Otherwise you are attempting to change the structure of your DOM with CSS alone, which is not possible.
Mmm, I think you can use jQuery .unwrap if I understand properly what you're trying to achieve.
Adapted from jQuery's own example...
<div class="yellow">
<p class="in-out">Am I in the </p>
<p class="in-out">div or out</p>
<p class="in-out">the div</p>
</div>
....
<button>Toggle</button>
---JS---
var pTags = $( ".in-out" );
$( "button" ).click(function() {
if ( pTags.parent().is( ".yellow" ) ) {
pTags.unwrap();
}
else {
pTags.wrap( "<div class='yellow'></div>" );
}
});
....
---CSS---
.yellow
{
background-color: yellow;
}
See example here...http://jsfiddle.net/richf/8LvJZ/
Obviously you don't need the button in your case.
How would I go about hiding a div and only displaying it if another div existed on a page? I'm guessing jquery or js would be the way to go....
<style type="text/css">
.always-here {
display:none;
}
</style>
<div class="im-here">This div exists on this particular page!</div>
<div class="always-here">This div is always here but has the style
display: none unless a div with the class "im-here" exists.</div>
For your current current html you can do
.always-here {
display:none;
}
.im-here ~ .always-here{
display:block;
}
this will only work if .always-here and .im-here are siblings and .im-here comes before.
http://jsfiddle.net/BKYSV/ - .im-here present
http://jsfiddle.net/BKYSV/1/ - .im-here absent
$(document).ready(function(){
if($(".im-here").length > 0)
{
$(".always-here").show();
}
});
here is the code
Click Here!
Try this:
if($(".im-here").length)
$(".always-here").show();