I'm beginner at js/jquery.
I want to code this structure with js/jquery:
<div class="box">
<p>1</p>
<div class="content"><span>Lorem</span></div>
</div>
<div class="box">
<p>2</p>
<div class="content"><span>Ipsum</span></div>
</div>
<div class="box">
<p>3</p>
<div class="content"><span>Dolor</span></div>
</div>
<div class="box">
<p>4</p>
<div class="content"><span>Sit</span></div>
</div>
<div class="box">
<p>5</p>
<div class="content"><span>Amet</span></div>
</div>
I have this code:
function addDivs(n) {
for(var i=1; i<=n; i++) {
var parentP = $("<p>"+i+"</p>");
var parentContent = $("<div class='content'></div>");
var boxClassDiv = document.createElement("div");
document.body.appendChild(boxClassDiv);
boxClassDiv.setAttribute("class", "box");
$("body").prepend(boxClassDiv, [parentP, parentContent]);
}
}
window.onload = function getFuncs() {
addDivs(16);
}
Here is fiddle: https://jsfiddle.net/ds6wj38k/2/
I found a few similar questions like this and tried to add to my code but i can't adjust.
Thanks.
So first of all you need a div with class box:
var box = $('<div>').addClass('box');
Then you want a p with a number:
var p = $('<p>').text(1);
And finally a div with class content and span inside:
var content = $('<div>').addClass('content');
var span = $('<span>').text('any');
content.append(span);
So you created elements you need. Time to combine them:
var listItem = box.append(p).append(content);
And add to body!
$('body').append(listItem);
The final code:
function addDivs(n) {
for (var i = 1; i <= n; i++) {
var box = $('<div>').addClass('box');
var p = $('<p>').text(i);
var content = $('<div>').addClass('content');
var span = $('<span>').text('any');
content.append(span);
var listItem = box.append(p).append(content);
$('body').append(listItem);
}
}
window.onload = function getFuncs() {
addDivs(16);
}
Check out code online: http://jsbin.com/xeyugubefu/edit?js,output
Here is how I would suggest to do it:
function addDivs(words) {
words.forEach( function (word, i) {
$('body')
.append($('<div>').addClass('box')
.append($('<p>').text(i+1))
.append($("<div>").addClass('content').append($('<span>').text(words[i]))));
});
};
$(function getFuncs() {
var words = 'Lorem ipsum dolor sit amet'.split(' ');
addDivs(words);
});
jQuery is designed to support method chaining, which the above code demonstrates.
Note that apart from building the content with jQuery, you should also replace window.onload with a jQuery.ready call, which you can write as $(callback).
Related
I have this code:
<div class="main_flex">
<div class="flex_items">
</div>
<div class="flex_items">
</div>
<div class="flex_items">
</div>
</div>
javascript:
function shoe_images () {
for (var i = 0; i < shoes.length; i++){
var getFlexItems = document.querySelector('.flex_items');
var createImgTag = document.createElement('img');
createImgTag.src = shoes[i].imageUrl;
getFlexItems.appendChild(createImgTag);
}
};
And i have an array of object with different images. I want to add different images to the
class="flex_items"
How do i do that? I used a for loop, but all the images shows in the first class="flex_items".
The problem is in the querySelector() method. This method return only the first element. It is the reason for this.
See: https://www.w3schools.com/jsref/met_document_queryselector.asp
You need to use querySelectorAll()
See: https://www.w3schools.com/jsref/met_document_queryselectorall.asp
Rewrited your code:
function shoe_images () {
var getFlexItems = document.querySelectorAll('.flex_items');
for (var i = 0; i < shoes.length; i++){
var createImgTag = document.createElement('img');
createImgTag.src = shoes[i].imageUrl;
getFlexItems[i].appendChild(createImgTag);
}
you can do this by css or by js
this for CSS
.flex_items:nth-of-type(2) {
background: #ff0000;
}
.flex_items:nth-of-type(1) {
background: #324445;
}
to used js
var elements = document.getElementsByClassName('flex_items');
it will return arry contain 3 elment [0,1,2]
elements[0].innerHTML ='<img src="path">';
elements[1].innerHTML ='<img src="path">';
You can select the flex_items then append the element image like this:
const images = [{
src: "https://picsum.photos/id/284/200/300"
}, {
src: "https://picsum.photos/id/284/200/300"
}, {
src: "https://picsum.photos/id/284/200/300"
}]
document.querySelectorAll(".flex_items").forEach((el, index) => {
const image = document.createElement("img");
image.setAttribute("src", images[index].src);
el.appendChild(image);
})
<div class="main_flex">
<div class="flex_items">
</div>
<div class="flex_items">
</div>
<div class="flex_items">
</div>
</div>
I have this code that hides a div that only contains a specific word, I've been trying (with no luck) to hide any div that contains this word, but also contains more text.
Any help will be appreciated, thanks!
let divs = document.getElementsByClassName('test');
for (let x = 0; x < divs.length; x++) {
let div = divs[x];
let content = div.innerHTML.trim();
if (content == 'example') {
div.style.display = 'none';
}
}
<div class="test">
ipsum
</div>
<div class="test">
example
</div>
<div class="test">
example complete
</div>
You could use JavaScript's string.includes().
A hacky way to only remove the div containing more then only "examaple" is to have "example " in the includes(). This will only remove the div if the innerHTML has a space after "example"
let divs = document.getElementsByClassName('test');
for (let x = 0; x < divs.length; x++) {
let div = divs[x];
let content = div.innerHTML.trim();
if (content.includes('example')) {
div.style.display = 'none';
}
}
<div class="test">
ipsum
</div>
<div class="test">
example
</div>
<div class="test">
example complete
</div>
Something modern…
document.querySelectorAll('.test').forEach((element, index) => {
if (element.innerText.includes('example')) {
element.style.display = 'none';
}
})
<div class="test">ipsum</div>
<div class="test">example</div>
<div class="test">example complete</div>
Docs:
NodeList.prototype.forEach()
String.prototype.includes()
If you want to remove the div that contains the search word (checked with includes) but that also has other characters in it perhaps store the word in a variable and check to see if the text is longer than that.
let divs = document.getElementsByClassName('test');
const word = 'example';
for (let x = 0; x < divs.length; x++) {
let div = divs[x];
let content = div.innerHTML.trim();
if (content.includes(word) & content.length > word.length) {
div.style.display = 'none';
}
}
<div class="test">
ipsum
</div>
<div class="test">
example
</div>
<div class="test">
example complete
</div>
Here's a modernised version of that code.
let divs = document.querySelectorAll('.test');
const word = 'example';
divs.forEach(div => {
const { style, textContent } = div;
const trimmed = textContent.trim();
if (trimmed.includes(word) && trimmed.length > word.length) {
style.display = 'none';
}
});
<div class="test">
ipsum
</div>
<div class="test">
example
</div>
<div class="test">
example complete
</div>
When you do div.innerHTML.trim(), it takes the entirety of the div element.
https://jsfiddle.net/ucvteLq7/7/
Try to search around regular expressions, and I think, you shouldn't hide a div according its class, but you must replace what it contains. Sorry that I can't help more.
I have this HTML code here :
<div id="ctr" class="faden-slider-container">
<div class="conteneur-image" ></div>
<div class="conteneur-image" ></div>
<div class="conteneur-image" ></div>
</div>
And I am trying to get the CSS property of the second div which class' name is conteneur-image but I get nothing :
app.controller("slideCtrl",function ($scope) {
alert("hello")
var tab = new Array();
var elements = new Array();
for(var i = 0; i<3 ; i++){
elements[i] = document.getElementById("ctr").children[i]
}
var style = window.getComputedStyle(elements[1])
var message = style.getPropertyCSSValue("background").cssText()
alert("CSS Value is : "+message)
})
Couple of issues there.
getPropertyCSSValue is obsolete and may not work in browsers anymore
id is a selector, not a valid css property
Use getPropertyValue instead,
var message = style.getPropertyCSSValue("background");
Demo
var style = window.getComputedStyle(document.getElementById("ctr").children[1])
var message = style.getPropertyValue("background");
console.log("CSS Value is : " + message)
<div id="ctr" class="faden-slider-container">
<div class="conteneur-image"></div>
<div class="conteneur-image"></div>
<div class="conteneur-image"></div>
</div>
Using jquery,you can get your 2nd HTML element this way:
var element = $("#ctr").children().eq(1);
Then if you want to make some transformation, like applying style:
element.css("background-color", "blue")
Here is a snippet:
var element = $("#ctr").children().eq(1);
element.css("background-color", "blue")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ctr" class="faden-slider-container">
<div class="conteneur-image" >one</div>
<div class="conteneur-image" >second</div>
<div class="conteneur-image" >third</div>
</div>
Suppose I have this HTML:
<article id="1919">
<div class="entry-content clearfix">
<div></div>
<div></div>
</div>
</article>
<article id="1910">
<div class="entry-content clearfix">
<div></div>
<div></div>
</div>
</article>
I need to put a link in div with class "entry-content clearfix" for all articles
So can I do it JavaScript:
//take all div with these class value
var eventi_programma=document.getElementsByClassName('entry-content');
//for to read these elements
for(var i=0;i<eventi_programma.length;i++){
var link="http://www.google.it";//(LINK EXAMPLE);
eventi_programma[i].parentElement.innerHTML=''+eventi_programma[i].outerHTML+'</div>';
}
But my code doesn't work.
(function (){
var eventi_programma=document.getElementsByClassName('entry-content');
//for to read these elements
for(var i=0;i<eventi_programma.length;i++){
var link="http://www.google.it";//(LINK EXAMPLE);
eventi_programma[i].parentElement.innerHTML=' THIS IS A LINK </div>';
}
})();
It didn't work because you are putting eventi_programma[i].outerHTML as text of the link. As your for loop is based on .entry-content class it basicly creates a never ending for loop since you keep creating new divs with that classname. So instead of putting outerHTML put some other text.
I assume your entry-content class has only one in every article tag ! So I retrieve all article and added then replace it.
var eventi_programma = document.getElementsByTagName("article");
//for to read these elements
for(var i=0;i<eventi_programma.length;i++){
var link="http://www.google.it";//(LINK EXAMPLE);
org_html = eventi_programma[i].innerHTML;
new_html = "<a href='"+link+"'>" + org_html + "</a>";
eventi_programma[i].innerHTML = new_html;
}
//take all div with these class value
var eventi_programma = $('div.entry-content');
//for to read these elements
for (var i = 0; i < eventi_programma.length; i++) {
var link = "http://www.google.it";//(LINK EXAMPLE);
var temp = eventi_programma[i];
$(temp).parent('article').html('</div>')
}
try it...
So, the following works - but can I replace the references 'img11', 'name11' and 'prof11' with something like 'this' so I don't have to assign id's every time I use this code?
<div onclick="changeStored(img11); changeName(name11); changeProf(prof11) ">
<div style="float:left">
<img id="img11" style="max-height:80px;" src="Pictures/Smiley.png">
</div>
<div style="float:left;">
<p id="name11">Name: Jane Doe</p>
<p id="prof11">Profession: Something</p>
</div>
</div>
I will post the functions just for completeness:
function changeStored(img){
storeOnClick = img.src;
alert(storeOnClick);
}
function changeName(img){
name = document.getElementById("name11").innerHTML;
alert(name);
}
function changeProf(img){
prof = document.getElementById("prof11").innerHTML;
alert(prof);
}
And no I can't just put the onclick event in the img or p because I need all 3 values to pass back to the functions when the user clicks anywhere in the div.
I think you can do something like this:
html
<div class="info">
<div style="float:left">
<img class="myimg" style="max-height:80px;" src="Pictures/Smiley.png">
</div>
<div style="float:left;">
<p class="myname">Name: Jane Doe</p>
<p class="myprof">Profession: Something</p>
</div>
</div>
js
var _divs = document.querySelectorAll('.info');
function changeAll() {
for (var i = 0; i < _divs.length; i++) {
var myimg = _divs[i].querySelector('.myimg'),
myname = _divs[i].querySelector('.myname'),
myprof = _divs[i].querySelector('.myprof')
// img
var storeOnClick = myimg.src;
alert(storeOnClick);
// name
var name = myname.innerHTML;
alert(name);
// profession
var prof = myprof.innerHTML;
alert(prof);
}
}
EDIT
To make this happen on 'click':
window.onload = function () {
var _divs = document.querySelectorAll('.info');
for (var i = 0; i < _divs.length; i++) {
_divs[i].addEventListener("click", function () { changeInfo(this) }, false);
}
}
function changeInfo(el) {
var myimg = el.querySelector('.myimg'),
myname = el.querySelector('.myname'),
myprof = el.querySelector('.myprof')
// img
var storeOnClick = myimg.src;
alert(storeOnClick);
// name
var name = myname.innerHTML;
alert(name);
// profession
var prof = myprof.innerHTML;
alert(prof);
}
You could still use the changeAll() if you wanted to do this for all info divs on page..
of course run your js after html has loaded..