New to js.
I want to be able to say if there are 2 classes on that page then insert another class but if there is 3 classes then insert a different class.
sometimes the page will be like...
<div class="wrapper">
<div class="compare"></div>
<div class="compare"></div>
</div>
and sometimes the page might be
<div class="wrapper">
<div class="compare"></div>
<div class="compare"></div>
<div class="compare"></div>
</div>
and sometimes like
<div class="wrapper">
<div class="compare"></div>
<div class="compare"></div>
<div class="compare"></div>
<div class="compare"></div>
</div>
I need to add a class to compare if the page display 2 classes of compare or add a different class if the page has 3 classes of compare
Thanks in advance
Ollie
Using jQuery you can do like this ( Assuming you are using it)
$(document).ready(function() {
if($('.compare').length >=2 ) {
//$('yourContainer').addClass('your-new-class');
//add your code as per your need.
}
});
Related
I have a row that is auto populated with data from an api. Each result from the api is stored in a div which is created with js as well and then a class is appended to it.
I then have a filter connected to a search box that filters through the results and shows the relevant data. The divs that do not have the search query are assigned a new class "hide" which hides them. Whenever a search is performed, I want to search through the populated row and find out how many divs have the class of "hide" but I can't seem to wrap my head around a working solution yet.
Here's what the code structure looks like
<div class="row">
<div class="data"></div>
<div class="data"></div>
<div class="data"></div>
<div class="data hide"></div> <!-- this is what itll look like for hidden divs -->
<div class="data hide"></div>
</div>
Can I use childelementcount in addition to classlist.contains() in order to solve this? Or what's a walkaround?
One approach to tackle this is to make use of querySelectorAll():
var list = document.getElementById('list');
var count = list.querySelectorAll('.data.hide').length;
console.log(count);
Please note that I added an id to the row element so that I could access it easier:
<div id="list" class="row">
<div class="data"></div>
<div class="data"></div>
<div class="data"></div>
<div class="data hide"></div>
<div class="data hide"></div>
</div>
Here's a live demo for your quick reference.
Is there any way I can remove the element in JS and to move inside another class. I have tried multiple ways but its throwing an error.
<div class="posts container">
<div class="row">
<div class="posts-item col-md-7 col-xs-12 p-0">
Abc
</div>
<ul>
</ul>
</div>
</div>
<div class="blog">
XYZ
</div>
I am trying to get output like using Javascript
<div class="posts container">
<div class="row">
<div class="posts-item col-md-7 col-xs-12 p-0">
Abc
</div>
<div class="blog">
XYZ
</div>
<ul>
</ul>
</div>
</div>
Iam trying to move the class name "blog" inside "posts-item".
Use insertBefore for moved your item:
const referenceNode = document.querySelector('.posts-item')
referenceNode.parentNode.insertBefore(document.querySelector('.blog'), referenceNode.nextSibling);
Try something like this, which works in Chrome for me, for the result you describe in the text:
document.querySelector('.posts-item').append(document.querySelector('.blog'))
...or to get the result you've illustrated, perhaps this:
document.querySelector('.posts-item').after(document.querySelector('.blog'))
You may need to modify the selectors if there are more elements sharing the classes used.
See docs at https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/after and https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append
I want to hide the divs except the first one in each of the div blocks with a unique class name. I am doing this because I have multiple carousels and I am shifting each one except the first one off the screen except the first div. This works great for a single carousel but when I introduce multiple ones, it hides all the divs except the first one.
original code for single carousel was:
$("div.hero-featureSwap:not(:first)").css({
"left" : "2000px"
});
but now I want to show the first "hero-featureSwap" of each carousel. Is there a hack around this?
I am guessing your structure might be something like this -
<div class="carousel">
<div class="carousel-child"></div>
<div class="carousel-child"></div>
<div class="carousel-child"></div>
<div class="carousel-child"></div>
</div>
<div class="carousel">
<div class="carousel-child"></div>
<div class="carousel-child"></div>
<div class="carousel-child"></div>
<div class="carousel-child"></div>
</div>
<div class="carousel">
<div class="carousel-child"></div>
<div class="carousel-child"></div>
<div class="carousel-child"></div>
<div class="carousel-child"></div>
</div>
Then this is how I would have done this -
$("div.carousel").each(function(){
$(this).find("div.carousel-child:not(:first)").css({
"left" : "2000px"
});
});
Please make necessary class name changes according to your structure.
Use this code:
$("div.hero-featureSwap").find('div:gt(0)').hide();
To hide. To move all other divs except the first the page, your code is just fine, or:
$("div.hero-featureSwap:gt(0)").css({
"left" : "2000px"
});
I have question that I feel should be simple but I am having issues getting the result I need. I can not change the HTML. Any help would be great!
I have a set up like this.
<div class="container">
<div class='mydiv'>this is text1</div>
</div>
<div class="container">
<div class='mydiv'>this is text2</div>
</div>
I am trying to get the text from each of those divs, set it to a var that I can then use to add a data attribute to the above it.
var DivText = $('mydiv').text();
$('.myAtag').attr('data', 'DivTest');
The problem I run into this that the data attribute is then filled with the text from both divs.
<div class="container">
<div class='mydiv'>this is text1</div>
</div>
<div class="container">
<div class='mydiv'>this is text2</div>
</div>
What can I use/how can I modifiy my jquery to achieve this outcome?
<div class="container">
<div class='mydiv'>this is text1</div>
</div>
<div class="container">
<div class='mydiv'>this is text2</div>
</div>
Use a callback to set each data attribute differently
$('.myAtag').attr('data-text', function() {
return $(this).next('.mydiv').text();
});
FIDDLE
It's usually a good idea to use a key, as in data-whatever
You could also use data(), but that sets the data internally in jQuery and does not add an attribute
I'm working on a responsive tumblr-theme based on the 1140GRID. To make the static videos fit the column, I used the jquery fitvids plugin.
My setup code looks like this:
$(document).ready(function(){
$("#post_{PostID}").fitVids();
});
and the accompanying html like this:
<div class="container">
<div class="row">
<div class="ninecol"> //grid I want it to fit into
{Block:Video}
<div id="post_{PostID}">
{Video-500}
</div>
{/Block:Video}
</div>
</div>
</div>
How do I trigger fitVids for multiple, dynamically generated ids on a page?
Thank you!
You may want to put that closing DIV inside the video block.
<div class="container">
<div class="row">
<div class="ninecol"> //grid I want it to fit into
{Block:Video}
<div id="post_{PostID}">
{Video-500}
</div>
{/Block:Video}
</div>
</div>
</div>
Then, you could target all the subdivs of ninecol.
<script>
$(document).ready(function(){
$('.ninecol > div').fitVids();
});
</script>