Remove and replace Element in Javascript - javascript

Is there any way I can remove the element in JS and to move inside another class. I have tried multiple ways but its throwing an error.
<div class="posts container">
<div class="row">
<div class="posts-item col-md-7 col-xs-12 p-0">
Abc
</div>
<ul>
</ul>
</div>
</div>
<div class="blog">
XYZ
</div>
I am trying to get output like using Javascript
<div class="posts container">
<div class="row">
<div class="posts-item col-md-7 col-xs-12 p-0">
Abc
</div>
<div class="blog">
XYZ
</div>
<ul>
</ul>
</div>
</div>
Iam trying to move the class name "blog" inside "posts-item".

Use insertBefore for moved your item:
const referenceNode = document.querySelector('.posts-item')
referenceNode.parentNode.insertBefore(document.querySelector('.blog'), referenceNode.nextSibling);

Try something like this, which works in Chrome for me, for the result you describe in the text:
document.querySelector('.posts-item').append(document.querySelector('.blog'))
...or to get the result you've illustrated, perhaps this:
document.querySelector('.posts-item').after(document.querySelector('.blog'))
You may need to modify the selectors if there are more elements sharing the classes used.
See docs at https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/after and https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append

Related

Bootstrap gallery grid

I'm trying to make custom gallery grid using bootstrap. All goes well but im stuck on last step.
I'm posting HTML structure since i belive it's problem in here somewhere but my code cotains some css (paddings/margins mostly) and JS (explained why below).
HTML:
<div class="about_gallery">
<div class="col-xs-9 pd-9">
<div class="row">
<div class="col-xs-8 pd-8">
<div class="color1"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
</div>
<div class="col-xs-4 pd-4">
<div class="color2"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
</div>
<div class="row">
<div class="col-xs-4 pd-4">
<div class="color3"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color11"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
<div class="col-xs-8 pd-8">
<div class="color4"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
<div class="row">
<div class="col-xs-6 cl-5">
<div class="color5"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
<div class="color12"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
<div class="col-xs-6 cl-6">
<div class="color6"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-3 pd-3">
<div class="color8 "><img class="pion-rect" src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color9"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
<div class="color10"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
</div>
Here is fiddle: http://jsfiddle.net/y6co8e5u/
The goal is to have grid like here: Grid example
As you can see on bottom left corner instead of 1 horizontal rectangle i have two squares and i don't know how to "connect" them since it's in different columns. It's my first time with bootstrap so it's probably a little bit messy. (I'm also not sure if my JS is needed here but when i added spaces between pictures i needed to extend the pictures) I'm open for any other solution too.
Thanks for help!
I will assume you are trying to add the .color7 div, append it to <div class="col-xs-4 pd-4">, just after the .color3 block. The block will look like this:
<div class="col-xs-4 pd-4">
<div class="color3"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color7"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
</div>
then on the css, set .color7 {width: calc(200% + 10px);}
here is the updated fiddle: http://jsfiddle.net/y6co8e5u/3/
no change to the js code.
You need to restructure your HTML a bit, have to put
<div class="color10"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
inside the <div class="col-xs-4 pd-4">
of second row. Hope this is what you want.
Check updated jsfiddler: http://jsfiddle.net/mayankN/y6co8e5u/1/

JavaScript value in HTML with JQuery

I implemented that in JavaScript:
$('#dash_adc_avg').html(adc_avg);
And this in HTML:
(part A)
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="box">
<div class="big-text" id="dash_adc_avg"></div>
<div class="description">
<i class="fa fa-chevron-up"></i>
Energy Monitor AS
</div>
</div>
</div>
And this in HTML:
(part B, same file as part A)
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<section class="widget index">
<header>
<h4>
<i class="fa fa-bars"></i> Status word <small> </small>
</h4>
</header>
<div class="body">
- Test: <div class="text" id="dash_adc_avg"></div><br>
etc.
Unfortunately, the visualization of the content from var adc_avg works properly for "part A" ONLY. Does anyone know why?
Thank you!
By the way and independent: I'm looking for a way to visualize JSON-Data (as Objects) on the website, without changing them. Any ideas?
From the id attribute section of the HTML specification:
The id attribute specifies its element's unique identifier (ID).
The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.
IDs must be unique in HTML. Because of this, JavaScript only ever looks for one instance of an ID and then stops searching. In your case, the ID being pulled is the one in part A - your code never bothers looking further than that.
Change your "dash_adc_avg" ID into a class instead:
<!-- Part A -->
<div class="big-text dash_adc_avg"></div>
<!-- Part B -->
- Test: <div class="text dash_adc_avg"></div><br>
Then with your jQuery select on the class instead of the ID:
$('.dash_adc_avg').html(adc_avg);
I'm not going to bother answering the second part of your question, which is about visualising JSON data, as it has absolutely nothing to do with the main part of the question and is completely separate. Please ask that as a different question.
An identity has to be unique in the page.
It's still possible to use the id attribute to find the elements, but then you have to use it as an attribute, not as an identity:
$('[id=dash_adc_avg]').html(adc_avg);
Generally a class is used instead when you want to put it on multiple elements. There is no benefit of keeping the dupliate id attributes as they don't work as identities.
You are using duplicate id's dash_adc_avg which is a invalid HTML instead of id's use class and modify your Jquery selector as shown :-
$('.dash_adc_avg').html(adc_avg);
you should use class when you are using same name for more than once on same page in your html:
$('.dash_adc_avg').html(adc_avg);
It is considered bad practice to use the same id tag on multiple places, I would suggest that you instead use class for your dash_adc_avg
$('.dash_adc_avg').html(adc_avg)
And this in HTML: (part A)
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="box">
<div class="big-text" class="dash_adc_avg"></div>
<div class="description">
<i class="fa fa-chevron-up"></i>
Energy Monitor AS
</div>
</div>
</div>
And this in HTML: (part B, same file as part A)
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<section class="widget index">
<header>
<h4>
<i class="fa fa-bars"></i> Status word <small> </small>
</h4>
</header>
<div class="body">
- Test: <div class="text" class="dash_adc_avg"></div><br>
Your id must be unique and if not the first element found by that id will be selected.
For multiple selection for same thing/functionality use class instead of id.

What can I use to get just one set of text from divs with the same class using jquery?

I have question that I feel should be simple but I am having issues getting the result I need. I can not change the HTML. Any help would be great!
I have a set up like this.
<div class="container">
<div class='mydiv'>this is text1</div>
</div>
<div class="container">
<div class='mydiv'>this is text2</div>
</div>
I am trying to get the text from each of those divs, set it to a var that I can then use to add a data attribute to the above it.
var DivText = $('mydiv').text();
$('.myAtag').attr('data', 'DivTest');
The problem I run into this that the data attribute is then filled with the text from both divs.
<div class="container">
<div class='mydiv'>this is text1</div>
</div>
<div class="container">
<div class='mydiv'>this is text2</div>
</div>
What can I use/how can I modifiy my jquery to achieve this outcome?
<div class="container">
<div class='mydiv'>this is text1</div>
</div>
<div class="container">
<div class='mydiv'>this is text2</div>
</div>
Use a callback to set each data attribute differently
$('.myAtag').attr('data-text', function() {
return $(this).next('.mydiv').text();
});
FIDDLE
It's usually a good idea to use a key, as in data-whatever
You could also use data(), but that sets the data internally in jQuery and does not add an attribute

Converting from working function in console to working script. (See Edit)

I'm trying to automate a clicking of a link within a class list. Currently I have a working script that will pick the first item in the container using the querySelector(), one line of code wrapped in a function.
To have more usability, I was wondering if I could modify the code so that the script searches within each item in the container trying to match a title of the listing or name with a defined variable, to the users desire, and once found, clicks the link for that particular item.
<div class="item-wall">
<div class="grid-item" data-column-index="0" data-pdpurl="http://www.LINK1.com">
<div class="grid-item"> … </div>
<div class="content">
<div class="grid-item-details-wrapper">
<div class="grid-item-image"> … </div>
<div class="grid-item-info-wrapper no-chipper">
<a href="http://www.LINK1.com">
<div class="product-name">
<p class="griditem-display-name nsg-font-size--regular nsg-text--dark-grey">
PRODUCT1
</p>
<p class="griditem-subtitle nsg-font-size--regular nsg-text--medium-grey"> … </p>
</div>
<div class="product-price-wrapper"> … </div>
</a>
</div>
<div class="grid-item-extras"> … </div>
</div>
</div>
</div>
<div class="grid-item" data-column-index="1" data-pdpurl="http://www.LINK2.com">
<div class="grid-item"> … </div>
<div class="content">
<div class="grid-item-details-wrapper">
<div class="grid-item-image"> … </div>
<div class="grid-item-info-wrapper no-chipper">
<a href="http://www.LINK2.com">
<div class="product-name">
<p class="griditem-display-name nsg-font-size--regular nsg-text--dark-grey">
PRODUCT2
</p>
<p class="griditem-subtitle nsg-font-size--regular nsg-text--medium-grey"> … </p>
</div>
<div class="product-price-wrapper"> … </div>
</a>
</div>
<div class="grid-item-extras"> … </div>
</div>
</div>
</div>
<div class="paging-bar hidden"> … </div>
<div class="spacer"></div>
</div>
Sorry for being so verbose. The web page has an 'item-wall' with several items, 2 are only shown here. I wish to be able to set a variable as a string in the script and be able to use something along the lines of .contain() to find an instance of the matching product name in the wall and then have it open the link corresponding to the selection.
Thanks for any input!
/////////////////////////////////////////////////////////////////////////////////////////////
EDIT: Thanks to #Barmar for the working console function:
function product_click(product) {
$(".griditem-display-name:contains("+product+")").closest("a").click();
}
product_click("Desirable here")
Now I am at a loss as to how to make this function operational in an script. I've tried with scriptish in firefox and have tried writing this to a .js file and loading it as an unpacked extension in chrome to no avail. It seems as though the function/script won't load. If anyone has any thoughts, they'd be greatly appreciated.
Thanks again!
If I understand you correctly, I think this is it:
function product_click(product) {
$(".griditem-display-name:contains("+product+")").closest("a").click();
}

knockoutjs - render template or foreach to self

I've been playing around with knockoutjs recently to see if it's going to be of any help to the things I do. I'm a bit stuck on something though.
Say I have an observableArray and and I want to bind the items using a template but without a container, or render itself. Is it possible?
The sample markup is:
<div class="header row">
<div class="cell">Product Name</div>
<div class="cell" data-bind="foreach: option_types">
<div class="cell" data-bind="html: Name"></div>
</div>
<div class="cell">Level</div>
<div class="cell">Infinite</div>
</div>
However what I would really want is something like this (note no child .cell elements, and "renderSelf" - made up parameter)
<div class="header row">
<div class="cell">Product Name</div>
<div class="cell" data-bind="foreach: option_types, renderSelf: true">
${Name}
</div>
<div class="cell">Level</div>
<div class="cell">Infinite</div>
</div>
Which would then result in something like
<div class="header row">
<div class="cell">Product Name</div>
<div class="cell">Name 1</div>
<div class="cell">Name 2</div>
<div class="cell">Name 3</div>
<div class="cell">Name 4</div>
<div class="cell">Level</div>
<div class="cell">Infinite</div>
</div>
Is that going to be possible? Or am I thinking of it in the wrong way?
Thanks.
Version 1.3 which is "stable beta" allows you to declare what's called a Containerless Control Flow. This is a fancy way of saying you can declare the foreach within an HMTL comment which will allow you to achieve the desired output. For your example it would look like this:
<div class="header row">
<div class="cell">Product Name</div>
<!-- ko foreach: option-types -->
<div class="cell" data-bind="html: Name"></div>
<!-- /ko -->
<div class="cell">Level</div>
<div class="cell">Infinite</div>
</div>
See this article on Steve Sanderson's blog for more info.
I've been using 1.3.0 on a relatively large application recently and found it to be very stable.
As an aside the ability in 1.3.0 to also access the parent and root viewModel within a foreach template is incredibly useful and helps keep your viewModel design much cleaner.

Categories

Resources