How can i access 3rd Element(H2) starting with the parent element "id="services-list".
Iam currently accessing using the below method.Is there a better way to do apart from the below. Please see i need purely Javascript.
var z = document.querySelectorAll('section[id="services-list"]');
z[0].firstElementChild.firstElementChild.firstElementChild.textContent
<section id="services-list" class="section container ">
<div class="row">
<div class="col-12 col-md-10 col-lg-6 offset-md-1">
<h2 class="section__title">Services</h2>
</div>
</div>
</section>
Regards,
Sree
let el = document.getElementById("services-list").getElementsByTagName("h2")[0];
console.log(el);
or with getElementsByClassName (but EI8- doesn't support getElementsByClassName)
let el = document.getElementById("services-list").getElementsByClassName("section__title")[0];
console.log(el);
getElementById("") to get the section.
Starting from this DOM element you can now call getElementsByClassName("") to find the h2 element
const elem = document.getElementById("services-list").getElementsByClassName("section__title")[0];
console.log(elem);
<section id="services-list" class="section container ">
<div class="row">
<div class="col-12 col-md-10 col-lg-6 offset-md-1">
<h2 class="section__title">Services</h2>
</div>
</div>
</section>
You can use complicated selectors to achieve your goal
var z = document.querySelectorAll('section[id="services-list"] .section__title');
console.log (z[0].textContent)
<section id="services-list" class="section container ">
<div class="row">
<div class="col-12 col-md-10 col-lg-6 offset-md-1">
<h2 class="section__title">Services</h2>
</div>
</div>
</section>
If you want to learn how to select elements in a shorter way:
var z = window['services-list'] // you id is unique, so we can use shorter way to select it
.querySelector('h2'); // you have only one h2 inside, so we also can do is shorter
console.log (z.textContent)
<section id="services-list" class="section container ">
<div class="row">
<div class="col-12 col-md-10 col-lg-6 offset-md-1">
<h2 class="section__title">Services</h2>
</div>
</div>
</section>
Related
The following solution works, but I would like to keep adding elements for the entire month.
When I remove the dates that are ="none" the previous dates start stacking on top of each other.
Is there a way to simplify the javascript so I wouldn't have to keep adding each date to the if-else statements to hide and show them?
function selectDate() {
var x = document.getElementById("start").value;
if (x == "2022-03-21") {
document.getElementById("2022-03-21").style.display = "flex";
document.getElementById("2022-03-22").style.display = "none";
document.getElementById("2022-03-23").style.display = "none";
}
else if (x == "2022-03-22") {
document.getElementById("2022-03-22").style.display = "flex";
document.getElementById("2022-03-21").style.display = "none";
document.getElementById("2022-03-23").style.display = "none";
}
else if (x == "2022-03-23") {
document.getElementById("2022-03-23").style.display = "flex";
document.getElementById("2022-03-21").style.display = "none";
document.getElementById("2022-03-22").style.display = "none";
}
}
<section>
<div class="container ">
<div class="row">
<div class="col">
<input type="date" id="start" onchange="selectDate()">
</div>
</div>
<div class="row" id="2022-03-21" style="display: none;">
<div class="col">
<div class="row">
<div class="col">
<h4>1</h4>
</div>
<div class="col">
<h4>2</h4>
</div>
</div>
</div>
</div>
<div class="row" id="2022-03-22" style="display: none;">
<div class="col">
<div class="row">
<div class="col">
<h4>3</h4>
</div>
<div class="col">
<h4>4</h4>
</div>
</div>
</div>
</div>
<div class="row" id="2022-03-23" style="display: none;">
<div class="col">
<div class="row">
<div class="col">
<h4>5</h4>
</div>
<div class="col">
<h4>6</h4>
</div>
</div>
</div>
</div>
</div>
</section>
I'm not sure what you mean by
When I remove the dates that are ="none" the previous dates start stacking on top of each other.
I don't see that happening in your snippet.
That said, you can simplify the code that hides/shows the div, and not have to hard code in the dates.
Give each element that you are wanting to show/hide a common class name, for example output
Select them all in a NodeList collection using document.querySelectorAll('.output')
Then with the .forEach() on that collection, you can loop through each one and change the display to none.
Then find the element that matches the date selected
If it is not null, then you can change the display to 'flex'
Personally I prefer to use document.querySelector() or document.querySelectorAll() method when selecting elements.
However, you'll notice that in step 4 above, I didn't. Since the ID begins with a number, it is better to use document.getElementById() rather than document.querySelector(). You can still do it, but it requires some string manipulation. See this post here: Using querySelector with IDs that are numbers
document.querySelector(`#start`).addEventListener(`change`, function(e) {
// Get every element with the 'output' class &
// loop through each one & change the display to 'none'
document.querySelectorAll(`.output`).forEach(el => el.style.display = `none`);
// get the element that matches the value of the date selected
const dispElm = document.getElementById(this.value);
// if the element exists, then change the display to 'flex'
if (dispElm) {
dispElm.style.display = `flex`;
}
});
<section>
<div class="container">
<div class="row">
<div class="col">
<input type="date" id="start">
</div>
</div>
<div class="row output" id="2022-03-21" style="display: none;">
<div class="col">
<div class="row">
<div class="col">
<h4>1</h4>
</div>
<div class="col">
<h4>2</h4>
</div>
</div>
</div>
</div>
<div class="row output" id="2022-03-22" style="display: none;">
<div class="col">
<div class="row">
<div class="col">
<h4>3</h4>
</div>
<div class="col">
<h4>4</h4>
</div>
</div>
</div>
</div>
<div class="row output" id="2022-03-23" style="display: none;">
<div class="col">
<div class="row">
<div class="col">
<h4>5</h4>
</div>
<div class="col">
<h4>6</h4>
</div>
</div>
</div>
</div>
</div>
</section>
I want to use a push, pull in Bootstrap v5.0.0-beta2, but how?
In Bootstrap 3, I'm using it like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
I tried. But I can't. Here is my JSFiddle
In Bootstrap V5, how can I use push and pull?
Please help.
Thanks in advance.
Push/pull is a grid technique. That's now deprecated in favour of flex.
For flex the helper classes are .order-. See BS5 Columns documentation.
You can use global ordering:
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
Or screen size specific ... i.e. .order-sm-*, .order-lg-*, and so on.
If you just want to shift, then use Offsetting Columns
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
EDIT:
In your case you can use:
<div class="row">
<div class="col-md-9 order-last">.col-md-9 <del>.col-md-push-3</del><ins>order-last</ins></div>
<div class="col-md-3 order-first">.col-md-3 <del>.col-md-pull-9</del><ins>order-first</ins></div>
</div>
or:
<div class="row">
<div class="col-md-9 order-2">.col-md-9 <del>.col-md-push-3</del><ins>order-2</ins></div>
<div class="col-md-3 order-1">.col-md-3 <del>.col-md-pull-9</del><ins>order-1</ins></div>
</div>
<div class="my-attributes">
<div class="row">
<div class="SameClass"><strong>Condition</strong></div>
<div class="SameClass-value" itemprop="condition">New</div>
</div>
<div class="row">
<div class="SameClass"><strong>Color</strong></div>
<div class="SameClass-value" itemprop="color">Black</div>
</div>
<div class="row">
<div class="SameClass"><strong>Availability</strong></div>
<div class="SameClass-value" itemprop="avail">In Stock</div>
</div>
<div class="row">
<div class="SameClass"><strong>Quantity</strong></div>
**<div class="SameClass-value" itemprop="qty"> 5 </div>**
</div>
<div class="row">
<div class="SameClass"><strong>Price</strong></div>
<div class="SameClass-value" itemprop="price">250</div>
</div>
I have multiple divs that has the same class and 'itemprop' attribute and I need to be able to create a function that will return the Quantity (which in the example above is '5')
the catch here is that the structure you see above changes in other pages. In the example above, the Condition and the Color shows but on other pages those do not appear which means the structure changes except the class name and the attribute value of the 'itemprop'. See below:
<div class="my-attributes">
<div class="row">
<div class="SameClass"><strong>Availability</strong></div>
<div class="SameClass-value" itemprop="avail">In Stock</div>
</div>
<div class="row">
<div class="SameClass"><strong>Quantity</strong></div>
**<div class="SameClass-value" itemprop="qty"> 5 </div>**
</div>
<div class="row">
<div class="SameClass"><strong>Price</strong></div>
<div class="SameClass-value" itemprop="price">250</div>
</div>
How do I get the Quantity into a JavaScript function and return the value of 5? Without having to edit the code of the site itself?
I have been playing with this but I am sure this is completely and utterly incorrect.
function () {
var x = document.getElementsByClassName("SameClass").getAttribute("itemprop");
if (x = 'price')
{
var a = document.getElementsByClassName("SameClass").getAttribute("itemprop").innerText;
return a;
}
}
The following might work for you:
function getQty() {
var arr=document.getElementsByClassName("SameClass-value");
for(var i=0;i<arr.length;i++)
if (arr[i].getAttribute("itemprop") == 'qty') return arr[i].innerHTML;
}
Or, even shorter, you can do
function getQty() {
return document.getElementsByClassName("SameClass-value")
.find(d=>d.getAttribute("itemprop") == 'qty').innerHTML;
}
Sorry for the repeated edits. It's been a long day for me today and I was trying to quickly put something together on my little smartphone.
If the classes don't change, you can select all the relevant elements then get the value from the one you need.
function getQty() {
var qty;
document.querySelectorAll("div.SameClass-value").forEach(function(element) {
if (element.getAttribute("itemprop") === "qty") {
qty = element.innerText;
}
});
return qty;
}
console.log(getQty());
<div class="my-attributes">
<div class="row">
<div class="SameClass"><strong>Condition</strong></div>
<div class="SameClass-value" itemprop="condition">New</div>
</div>
<div class="row">
<div class="SameClass"><strong>Color</strong></div>
<div class="SameClass-value" itemprop="color">Black</div>
</div>
<div class="row">
<div class="SameClass"><strong>Availability</strong></div>
<div class="SameClass-value" itemprop="avail">In Stock</div>
</div>
<div class="row">
<div class="SameClass"><strong>Quantity</strong></div>
<div class="SameClass-value" itemprop="qty"> 5 </div>
</div>
<div class="row">
<div class="SameClass"><strong>Price</strong></div>
<div class="SameClass-value" itemprop="price">250</div>
</div>
</div>
I have been trying to find out how to do a sitewide search for an elements index of a certain class. Doesn't have to sitewide, but i has to be usuable for an ancestor div.
My markup is the following:
<div class="custom-woo-gallery">
<div class="row">
<div class="gallery-item"></div>
<div class="gallery-item"></div>
<div class="gallery-item"></div>
</div>
<div class="row">
<div class="gallery-item"></div>
<div class="gallery-item"></div>
<div class="gallery-item"></div>
</div>
<div class="row">
<div class="gallery-item"></div>
<div class="gallery-item"></div>
<div class="gallery-item"></div>
</div>
<div class="row">
<div class="gallery-item"></div>
<div class="gallery-item"></div>
<div class="gallery-item"></div>
</div>
<div class="row">
<div class="gallery-item"></div>
<div class="gallery-item"></div>
<div class="gallery-item"></div>
</div>
</div>
Basically a .gallery-item element is clicked and i need to find out how many .gallery-item elements preceeds it in the common ancestor .custom-woo-gallery.
I have the following code, which is functional. But I'm guessing theres more simple way to do this. I just can't seem to find anything on google other than index() and eq() which only seems to work inside the same parent div.
function getPrev(){
var count = 0;
$(clicked).parent().prevUntil().each(function(){
count = count + $(this).children().length;
})
var self = $(clicked).prevUntil().length;
return count + self;
}
Try this solution. If you have only one custom-woo-gallery, you can get the index of the current clicked gallery-item's index via jQuery#index. And you can find how many how many .gallery-item elements precedes it.
Actually the index of the clicked div is the number of his previous .gallery-items.
const galleryItems = $('.gallery-item');
$('.gallery-item').on('click', function(){
console.log(galleryItems.index($(this)));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-woo-gallery">
<div class="row">
<div class="gallery-item">1</div>
<div class="gallery-item">2</div>
<div class="gallery-item">3</div>
</div>
<div class="row">
<div class="gallery-item">4</div>
<div class="gallery-item">5</div>
<div class="gallery-item">6</div>
</div>
<div class="row">
<div class="gallery-item">7</div>
<div class="gallery-item">8</div>
<div class="gallery-item">9</div>
</div>
<div class="row">
<div class="gallery-item">10</div>
<div class="gallery-item">11</div>
<div class="gallery-item">12</div>
</div>
<div class="row">
<div class="gallery-item">13</div>
<div class="gallery-item">14</div>
<div class="gallery-item">15</div>
</div>
</div>
Consider the following HTML:
<div id="members" class="main">
<section class="top">
<!-- Other Content -->
</section>
<section class="listing">
<div class="holder container">
<div class="row">
<div class="members-main col-sm-12">
<div class="members-head row">
</div>
</div>
</div>
</div>
</section>
</div>
Is there a way in JavaScript or jQuery that I can find out the amount of pixels between the start of the #members element and the start of the .members-head element?
offset().top gives you the top position of elements.
var distance = $('.members-head').offset().top - $('#members').offset().top;
alert("Distance is : " + distance)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="members" class="main">
<section class="top">
Other Content
</section>
<section class="listing">
<div class="holder container">
<div class="row">
<div class="members-main col-sm-12">
<div class="members-head row">
fdgfdgfdgdfgdfs
</div>
</div>
</div>
</div>
</section>
</div>
Try
$('.members-head').offset().top - $('#members').offset().top
Jquery offset
If you have multiple .members-head elements inside the #members one (as I suspect), you could try $('.members-head:first'), or loop through them with .each and do $(this).offset().top - $('#members').offset().top
try this
you will get.
$('#members').offset().top - $('.members-head').offset().top