We Keep Coding

Finding index of div element within another div in jQuery [duplicate]

This question already has answers here:
Get index of element as child relative to parent
(6 answers)
Closed 2 years ago.
I need a simple script that would alert me with index number of certain div within a div.
Hovering over first box gives it's index (0) then another gives 1,2,3 etc.
Result I'm looking for is so third and fourth .box div would give their indexes within .box-container so 0 then 1 and not index of them within whole document. How would I approach such task? I know my code is close just not close enough.
$(".box").mouseover(function() {
console.log($(".box").index($(this)));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-container">
<div class="box">0</div>
<div class="box">1</div>
</div>
<div class="box-container">
<div class="box">2</div>
<div class="box">3</div>
</div>

You are searching .box class specific index() function to get index of element. There is issue due to its getting incremental ways index of element.
if you do using $this their index() it works.
Below is example :
$(".box").mouseover(function() {
console.log($(this).index());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-container">
<div class="box">0</div>
<div class="box">1</div>
</div>
<div class="box-container">
<div class="box">2</div>
<div class="box">3</div>
</div>

Passing span classes to data attribute with jquery [duplicate]

This question already has answers here:
Find nested element in query
(5 answers)
Closed 5 years ago.
I am after some assistance in passing the value of my span classes to a data attribute (data-groups) contained in their parent divs all with the same class (.item). Here is my current code.
<div class="item" href="#" data-groups="">
<div class="caption">
<p><span class="value1"></span>Description</p>
</div>
</div>
<div class="item" href="#" data-groups="">
<div class="caption">
<p><span class="another-value"></span>Description</p>
</div>
</div>
<div class="item" href="#" data-groups="">
<div class="caption">
<p><span class="third-value"></span>Description</p>
</div>
</div>
<script type="text/javascript">
$(".item").attr("data-groups", function() {
return $('.caption p span').attr('class');
});
</script>
This works somewhat but it populates all data-groups attributes with "value1". I am wanting them all to receive the data attribute from their respective child span classes. Eg, First item div should have a 'data-groups'attribute of 'value1', second with 'another-value', etc.
I'm a little rusty with jquery but learning as I go. Any assistance is appreciated.

Try this:
$(".item").attr("data-groups", function() {
return $(this).find('.caption p span').attr('class');
});

Failure in the querySelectorAll() from JavaScript [duplicate]

This question already has answers here:
getElementById() returns null even though the element exists [duplicate]
(5 answers)
Closed 6 years ago.
I'm having a problem when I try to get a element by using querySelectorAll.
Here is the part of HTML that I want to get from JS:
<div id="paginacao">
<div class="pag-base"> {{1}} </div>
<div class="pag-base">{{2}}</div>
<div class="pag-base">{{3}}</div>
<div class="pag-base">{{4}}</div>
<div class="pag-base">{{5}}</div>
<div class="pag-base">{{6}}</div>
<div class="pag-base">{{7}}</div>
<div class="pag-base">{{8}}</div>
<div class="pag-base">{{9}}</div>
<div class="pag-base">{{10}}</div>
<div class="pag-base">...</div>
</div>
I'm doing this on JavaScript:
var pages = document.querySelectorAll(".pag-base a");
console.log(pages[0].textContent);
but this always returns undefined. Anyone knows what am I doing wrong?

that's because the script file is loading before your dom is ready .
try script tag below your div tag

Nothing wrong with your code.
Everything working as expected, see below
var pages = document.querySelectorAll(".pag-base a"); console.log(pages[0].textContent);
for(var i =0; i < pages.length; i++){
console.log(pages[i].textContent);
}
<div id="paginacao">
<div class="pag-base"> {{1}} </div>
<div class="pag-base">{{2}}</div>
<div class="pag-base">{{3}}</div>
<div class="pag-base">{{4}}</div>
<div class="pag-base">{{5}}</div>
<div class="pag-base">{{6}}</div>
<div class="pag-base">{{7}}</div>
<div class="pag-base">{{8}}</div>
<div class="pag-base">{{9}}</div>
<div class="pag-base">{{10}}</div>
<div class="pag-base">...</div>
</div>

Detect what position a div takes in an array [duplicate]

This question already has answers here:
Finding DOM node index
(7 answers)
Closed 8 years ago.
I want to know what position a div has in an argument: by this I mean, that if I have several divs witht the same name, like so:
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
I would like to detect onclick what position the div click takes: 1st, 2nd....

Use the index() function, it will return a zero-based index of the clicked element within the selection:
$('.woot').click(function(){
var clickedIndex = $('.woot').index($(this));
})
See it here: http://jsfiddle.net/xtbu13gh/

<div class="parent">
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var woots = $(".parent").find(".woot");
$(woots).each(function(index){
$(this).attr("data-position", index);
});
$(".parent").on("click", ".woot", function(){
console.log($(this).data("position"));
});
});
</script>
You should see the position in the console if you are running it in a browser like Chrome, for example.

Simplify the html element into js

I am making bunch of elements that look like the same
I have
<div id="e1" class="e1">
<div class=box>
<div class='b1'></div>
<div class='b2'></div>
<div class='b3'></div>
<div class='b4'></div>
</div>
<div class='e11'></div>
<div class='e12'></div>
<div class='e13'></div>
<div class='e14'></div>
<div class='e15'></div>
...more elements
<div>
<div id="e2" class="e2">
<div class=box>
<div class='b1'></div>
<div class='b2'></div>
<div class='b3'></div>
<div class='b4'></div>
</div>
<div class='e11'></div>
<div class='e12'></div>
<div class='e13'></div>
<div class='e14'></div>
<div class='e15'></div>
...more elements
<div>
They are almost the same and I have several e3 and e4 div...
MY question is if there are anyways to reduce the codes and create them in js with an object (or better approach).
Would anyone gives me a hint? Thanks a lot!

jsFiddle Demo
You are going to need to get some iteration parameters, and then make a function which iterates based on those parameters to create these html elements. The primary way do create an html element is
document.createElement("tagname");
and then you are going to need to append them in the order you wish. Once they are done, you can append them to an element on the screen. Avoid appending inside of a loop. Even if you create a lot of elements, they will render quickly if they are only appended onto the screen once instead of each time an element is created.
Here is a simple example:
<div id="contentZone"></div>
<script>
var c = document.getElementById("contentZone");
var content = document.createElement("div");
for( var i = 0; i < 3; i++ ){
var d = document.createElement("div");
d.innerHTML = i + ") Hello :D";
content.appendChild(d);
}
c.appendChild(content);
</script>