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

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.

Related

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');
});

JavaScript: Remove last child with class [duplicate]

This question already has an answer here:
jQuery remove last-child of a class
(1 answer)
Closed 6 years ago.
So I'm trying to remove the last element in my DOM with a specific class but I'm not having much luck. I can remove the class entirely, but not last one by itself. Any help would be great
<div class="banner banner-1"></div>
<div class="banner banner-2"></div>
<div class="banner banner-3"></div>
<div class="banner banner-4"></div>
<div class="banner banner-3"></div>
<div class="banner banner-5"></div>
Sorry, forgot to paste my other code in:
var classToRemove = 'banner-3';
document.removeChild(document.getElementsByClassName(classToRemove))
For example, I have 6 banners, but banner 3 is repeated. How do I get the last banner-3 and remove it without affecting the first one?
Thanks!
// access all elements by class
var ele = document.getElementsByClassName('banner');
// find last element
var lastEle = ele[ ele.length-1 ];
//--- do what you need to do with the element
or
var ele = document.querySelectorAll(".banner .banner_3");
var lastEle = ele[ ele.length-1 ];
lastEle.parentNode.removeChild(lastEle);
You can get list by getElementsByClassName then in iteration remove them but not first
for(var i=1;i<document.getElementsByClassName('banner-3').length;i++)
document.getElementsByClassName('banner-3')[i].remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner banner-1">1</div>
<div class="banner banner-2">2</div>
<div class="banner banner-3">3</div>
<div class="banner banner-4">4</div>
<div class="banner banner-3">3</div>
<div class="banner banner-5">5</div>

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>

Stop other onclick events [duplicate]

This question already has answers here:
How do I prevent a parent's onclick event from firing when a child anchor is clicked?
(25 answers)
Closed 7 years ago.
If two onclick are on top of each other, i would like to know how to stop the second one from launching.
Example :
<div id="div1" onclick="alert('a');">
a
<div id="div2" onclick="alert('b');">
b
</div>
a
</div>
if click on div2, i would like to have only alert(b), but NOT alert(a) afterwards.
FIDDLE : https://jsfiddle.net/ae9av150/2/
<div id="div1" onclick="alert('a');">
a
<div id="div2" onclick="alert('b');event.stopPropagation();">
b
</div>
a
</div>
<div id="div1" onclick="alert('a');">
a
<div id="div2" onclick="event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);alert('b');">
b
</div>
a
</div>
Reference: http://javascript.info/tutorial/bubbling-and-capturing
for IE<9, you should use event.cancelBubble=true
Do like this.
window.onload = function() {
document.getElementById("div2").onclick = function(e){
e.stopPropagation();
alert('b');
}
}
HTML
<div id="div1" onclick="alert('a');">
a
<div id="div2">
b
</div>
a
</div>

Categories