Failure in the querySelectorAll() from JavaScript [duplicate] - javascript

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>

Related

How to hide and show a text by hidden field in JQuery [duplicate]

This question already has answers here:
Using JQuery to toggle div visibility
(4 answers)
Closed 1 year ago.
Hi I want to hide and show a text Cod Shipping charge
`<div class="row">
<div class="cell" id="well">Cod Shipping charge</div>
<div class="cell free"><?php echo $priceCurrency->getCurrency()->getCurrencySymbol();?> <span class="text-shipping-charge"><?php echo number_format($shippingrate,2,'.',''); ?></span></div>
</div>`
when clicking on the payment below code
<div class="payment-option">
<div class="head" >Part Payment (COD + Online)</div>
<div class="content">
<div class="cod-block">
<div class="cash-option">
<div class="pay-option">
<div class="option-info">20% Online (Now)</div>
<div class="option-cash">₹ 12,650</div>
</div>
<div class="pay-option">
<div class="option-info">80% Cash On Delivery</div>
<div class="option-cash">₹ 50,000</div>
</div>
</div>
Please Help
You mention JQuery so using that it could be something like:
$('.payment-option').click(function(){
$('.row').show();
});
Though class .row doesn't sound very unique so you may want to assign that element a unique id like
<div id="cod_shipping_charge" class="row">
then you can use:
$('#cod_shipping_charge').show();
$(document).ready(function() {
$("#btnNewGroup").click(function() {
$("#newGroup").toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
<button id="btnNewGroup">New Group</button>
<div id="newGroup" style="display:none">Div Content</div>
</div>

how to loop through every two items in div [duplicate]

This question already has an answer here:
how to ADD class in every to div using loop
(1 answer)
Closed 1 year ago.
This is my HTML structure I want to check every two productItem div how can I check every two div
which JavaScript loop structure I need to use
<div class="custompsps">
<div class="ProductItem">
</div>
<div class="ProductItem">
</div>
<div class="ProductItem">
</div>
<div class="ProductItem">
</div>
</div>
<div class="custompsps">
<div class="ProductItem">
</div>
<div class="ProductItem">
</div>
<div class="ProductItem">
</div>
<div class="ProductItem">
</div>
</div>
You can select all elements, and then loop over them,
This is an example if you want to add classes
let allProds = document.querySelectorAll(".ProductItem");
for(let i = 0; i< allProds.length; i+2){
allProds[i].classList.add("everyOddItem");
}

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>

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.

Categories