I'm new to using flask and javascript.
I have div's being created with information like this
<div id="divholder">
{%for i in volcanoinfo%}
<div class="volcdiv">
<p id="volcanolat" style="display: none;">{{ i['vlat'] }}</p>
<p id="volcanolon" style="display: none;">{{ i['vlng'] }}</p>
</div>
{%endfor%}
</div>
I would then like to access each 'volcdiv' using a for loop for use else where.
Is this possible?
Yes, you can:
const items = document.querySelectorAll('.volcdiv div');
this will give you items as a NodeList. You can then use the spread functionality to turn that into an array and then iterate through:
[...items].forEach(item => {
// iterating through each div
});
alsio as #Rory stated, you don't want to re-use an id.
Related
So i am presented with a task from the client to make a loop of div elements draggable. To make this happened, i have used angular2-draggable to make it possible.
It works on a single div that has not been looped over, as seen below:
<div ngDraggable [handle]="DemoHandle" class="card">
<div #DemoHandle class="card-header">I'm handle. Drag me!</div>
<div class="card-block">You can't drag this block now!</div>
</div>
But the question is, how to i make take this code an place it into an *ngFor loop in Angular (maybe just like the code seen below)?
<div *ngFor="let myValue of myValues" [handle]="{{myValue.id}}">
<div #{{ myValue.id }} >{{ myValue.title }}</div>
</div>
The problem here is that both this [handle]="DemoHandle" and #DemoHandle (Im talking about the DemoHandle value) needs to be unique. But i have no way to print a unique value similar to this code below:
<div *ngFor="let myValue of myValues">
<div [attr.id]="myValue.id" >{{ myValue.title }}</div>
</div>
How do i go about this?
Template reference variables are unique within enclosed view. *ngFor directive create embedded view for each item so that template reference variable is unique there.
So just try the following:
<div ngDraggable *ngFor="let item of [1,2,3]" [handle]="DemoHandle">
<div #DemoHandle class="card-header">I'm handle {{item}}. Drag me!</div>
...
</div>
Ng-run Example
How do I add different classes for the inner elements in an ngFor loop in Angular 4? Say, I have a snippet:
<div *ngFor="let article of articles">
<div>
<h3>{{article.name}}</h3>
<p>{{article.body}}</p>
</div>
</div>
So I have 2 questions: how do I add different classes to the h3 elements in every generated article based on their order (first, second, third) and how do I add classes to the h3 elements based on odd-even order?
You can get the index, odd, and even of the current iteration in the ngForOf, combine that with ngClass and you can set the class.
<div *ngFor="let article of articles; index as i; even as isEven; odd as isOdd">
<div id="article">
<h3 [ngClass]="{'odd': isOdd, 'even': isEven}">{{article.name}}</h3>
<p>{{article.body}}</p>
</div>
</div>
You do not mention how you want to use the index/position so there is no code for that. I am sure you can figure that part out though based on the sample code above and documentation.
As #Paco0 also pointed out maybe you meant id="article" to be id="{{article.id}}" or something similar?
I have my object like so:
var text = document.getElementsByClassName('decode-text')[0];
It is a list of html elements that look like:
<div class="decode-text">
<div class="cycleText">
<div class="cycle-0">
<div class="text-animation">hey</div>
</div>
<div class="cycle-1">
<div class="text-animation">you</div>
</div>
<div class="cycle-2">
<div class="text-animation">guys</div>
</div>
</div>
</div>
I will just use indexof but want to understand why .contains returns false?
text.classList.contains('cycleText'); = false // why
Also any recommendations on getting the number of 'cycle-*' class names in this node list?
You can achieve this using css attribute selectors. The ^ means "starts with":
document.querySelectorAll('[class^="cycle-"]');
classList is a list of classes assigned to the current DOM element, and does not include the classes of its children.
The only entry of the list is decode-text.
I have this situation:
<div id="first">
<div>
<p>text</p>
</div>
</div>
<div id="second">
<div>
<button class="button">click</button>
</div>
</div>
...
<div id="first"> ... </div>
<div id="second"> ... </div>
...
and so on, the structure repeats.
This structure is created dynamically so I can't use any specific class nor id for the first div.
I need to retrieve the text in the first div when I hit the button in the second div.
(NOTE: I need a pure javascript solution, not a jQuery solution)
Thanks
Assuming you have an event handler for the button click, you could do this from that event handler:
function buttonClickHandler(e) {
var first = this.parentNode.parentNode.previousSibling;
var paragraphs = first.getElementsByTagName("p");
var text = paragraphs[0].textContent;
}
If you have common and known class names on the the divs marked first and second, then you can make your Javascript code much more insulated from markup changes which is generally a good idea.
P.S. I presume you know that you should't have duplicate id values in your HTML. This code doesn't use them, but you should be using class names instead of id values if you're going to have duplicates.
I can't figure out how to reach a nested div from the outer most element. Here is the html:
<li id="slide1">
<div id="video-container">
<div id=video-holder><div id="thumbnail"></div></div>
<div id=video-title></div>
<div id=video-desc></div>
</div>
</li>
I need jquery that will reach the id thumbnail from the starting id of the slide1
Use find to get the descendant.
$("#slide1").find("#thumbnail")
Basically since it is id you can just do: as id is supposed to be unique no matter where it appears.
$("#thumbnail");
For your scenario you want to use startswith selector to select the dynamic id starts with video_fake and in the 5th
slide.
$('#slide5fake').find('[id^=video_fake]').attr('id', 'newId')
$("#slide1").find("#thumbnail")
try this
<li id="slide1">
<div id="video-container">
<div id=video-holder><div class="thumbnail"></div></div>
<div id=video-title></div>
<div id=video-desc></div>
<div id="video-container">
<div id=video-holder><div class="thumbnail"></div></div>
<div id=video-title></div>
<div id=video-desc></div>
</div>
</li>
<script type="text/javascript">
$('#slide1').find('.thumbnail').each(function(){ });//you can get here two thumbnail
</script>
$("#thumbnail")
will find the thumbnail directly, but I suspect the id for your thumbnail will be repeated down the page, so you really need to be searchind for a class.
$("#slide1.thumbnail")
will do that if you change this line
<div id=video-holder><div id="thumbnail"></div></div>
to this
<div id=video-holder><div class="thumbnail"></div></div>
In case there are more "thumbnails" on your page, it would be better to give it a class. Ids should be unique.
In your given case, it would be sufficient to get it by ID
document.getElementById("#thumbnail")
If you gave it a class
document.querySelector("#slide1 .thumbnail")
would get you the element.
In jQuery the equivalent would be:
$("#slide1").find(".thumbnail");
There are many ways you can do this...
Single selector:
$('#slide1 #thumbnail');
If you already have the slide element:
var slide = document.getElementById("slide1");
// and then:
$('#thumbnail', slide);
Doing a .find() on the #slide1 element
$("slide1").find("#thumbnail");
But since you're using an ID it doesn't make sense to do anything else but finding that single ID, since you shouldn't have more than one element on a page with the same ID
$("#thumbnail");
There are probably more ways.. and what the best method is depends a lot on what you're doing and what the context is...
Good luck