Ordering appended classes with Jquery - javascript

I want to ask, is this possible to order appended classes? For example, in my JSFiddle i want to get on mobile look Lorem ipsum dolor sit amet when Im appending classes.
There's my JQuery
$(".cont-1, .cont-2, .cont-3, .cont-4").clone().prependTo(".mobile-content");
P.S. There's no way to change class order in .content

There's no way to do that in a single selector as elements are generally ordered as they are found in the DOM (although that in itself isn't guaranteed either).
You would need to sort() the elements if you want to affect their order. Given your sample you would need to create an array which holds the values in the correct order which you can then use to compare the indexes within the sort() method, something like this:
$(".cont-1, .cont-2, .cont-3, .cont-4").clone().prependTo(".mobile-content");
var ordering = ['lorem', 'ipsum', 'dolor', 'sit amet'];
$('.mobile-content div').sort(function(a, b) {
return ordering.indexOf(a.innerText.trim().toLowerCase()) - ordering.indexOf(b.innerText.trim().toLowerCase());
}).appendTo('.mobile-content');
div.content > div {
display: inline
}
div.mobile-content > div {
display: inline;
margin: 0 5px 0 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Original look:<br />
<div class="content">
<div class="cont-2">ipsum</div>
<div class="cont-1">Lorem</div>
<div class="cont-4">sit amet</div>
<div class="cont-3">dolor</div>
</div><br />
Mobile look:<br />
<div class="mobile-content"></div>
This pattern becomes arguably redundant when dealing with a single set of elements (as above) as you could just generate the div elements in order from your ordering array, instead of cloning them and then sorting them.

You could use an array of selectors, and prepend one by one
['.cont-1', '.cont-2', '.cont-3', '.cont-4'].reverse().forEach(function(s) {
$(s).clone().prependTo(".mobile-content");
});
div.content>div{display:inline}
div.mobile-content>div{display:inline;margin:0 5px 0 0}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Original look:<br />
<div class="content">
<div class="cont-2">ipsum</div>
<div class="cont-1">Lorem</div>
<div class="cont-4">sit amet</div>
<div class="cont-3">dolor</div>
</div>
<br />Mobile look:<br />
<div class="mobile-content">
</div>
Or sort by classname
$(".cont-1, .cont-2, .cont-3, .cont-4").clone().sort( (a,b) =>
a.className.localeCompare(b.className)
).prependTo(".mobile-content");
div.content>div{display:inline}
div.mobile-content>div{display:inline;margin:0 5px 0 0}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Original look:<br />
<div class="content">
<div class="cont-2">ipsum</div>
<div class="cont-1">Lorem</div>
<div class="cont-4">sit amet</div>
<div class="cont-3">dolor</div>
</div>
<br />Mobile look:<br />
<div class="mobile-content">
</div>

Related

CSS/JS - Overriding font-size if the word is too long for the container

I have a series of containers that each contain a word, occasionally two words.
CSS
.container-title {
font-size: 5.625vw;
}
HTML
<div class="container">
<div class="container-title">Orange</div>
</div>
<div class="container">
<div class="container-title">Acai Berry</div>
</div>
<div class="container">
<div class="container-title">Kiwi</div>
</div>
<div class="container">
<div class="container-title">Mangosteen</div>
</div>
These all look perfect, except for "Mangosteen" that ends up as "Mangoste-en". I don't mind title with two words, but want to avoid any one-word title from being hyphenated. Would it be best to override this in JS to fix the issue, or is there a CSS method that would work?
Try this in CSS3.0:
div {
word-wrap: break-word;
}

Apply change to all parent elements that contains a certain child element using jQuery

I'm trying to do the same thing as this question but my parent element does not have an id. It does have a class through. Basically I have multiple elements of the same class and some have a child element. If a member of the class example contains the child, apply some CSS change. Is this possible and how would I do it?
For example:
<div class="example">
<div id="findMe"></Div>
</div>
<div class="example">
<!-- This div would not be found -->
</div>
My guess was:
let parents = $(".example");
for (var i=0; i < parents.length; i++) {
if (parents[i].find('#test').length) {
parents[i].css("prop", "value")
}
}
but parents[i].find is not a function
So you shouldn't have multiple instances of the same ID in a document. But in your example, you were pretty close. However, if you're already using jQuery it will make your life a bit easier.
<div class="example">
<div class="findMe"></Div>
</div>
<div class="example">
<!-- This div would not be found -->
</div>
jQuery:
(I'm using the $ to denote a jQuery collection you wouldn't need it)
A jQuery collection (in this case created by find) always has a length. So you need to test if it's empty. Also $.each() is basically looping through the collection.
let $parents = $('.example');
$parents.each(
function(){
var $el = $(this);
if($el.find('.findMe').length !=0){
$el.css('background', 'red');
}
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:100px;" class="example">
<div class="findMe">Hello, World!</Div>
</div>
<div style="height:100px;border: solid 1px #000" class="example">
<!-- This div would not be found -->
</div>
As Heretic Monkey said in the comments above, you can use has from jQuery to do this easily.
$(".example").has(".findMe").css("background-color", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:100px;" class="example">
<div class="findMe">Hello, World!</Div>
</div>
<div style="height:100px;border: solid 1px #000" class="example">
<!-- This div would not be found -->
</div>

Jquery how to find element from outside

I would like to find an element which is outside from element which I'm trying click.
I need to click #form-1 and slideToggle .business-form-kaufen.
You can look hierarchy in the picture.
Thanks for help!
You need to go up two DIV levels from the button, then go to the next DIV, and find .business-form-kaufen in there.
$(".button").click(function() {
$(this).parent().parent().next().find(".business-form-kaufen").slideToggle();
});
Use .parent() relatively
$("#form-1").on("click", function(evt) {
$(this).parent().parent().next().find(".business-form-kaufen").slideToggle();
});
.business-form-kaufen {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 text-left">
<div id="kaufen-form-submit">
<a id="form-1">Unverbindliches ...</a>
</div>
</div>
<div id="wpcf7-fp09-p448-ol">
<div class="screen-reader-response"></div>
<form>
<div class="business-form-kaufen">
Lorem ipsum dolor sit amet
</div>
</form>
</div>
Or if you can either edit your html to add some id to the .business-form-kaufen or be sure that it is only this single element of this class, you can do it much simpler:
$("#form-1").on("click", function(evt) {
$(".business-form-kaufen").slideToggle();
// $("#business-form-kaufen").slideToggle() uncomment if you can setup unique id on this element
});
.business-form-kaufen {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 text-left">
<div id="kaufen-form-submit">
<a id="form-1">Unverbindliches ...</a>
</div>
</div>
<div id="wpcf7-fp09-p448-ol">
<div class="screen-reader-response"></div>
<form>
<div class="business-form-kaufen">
Lorem ipsum dolor sit amet
</div>
</form>
</div>
I assume form and business-form-kaufen are 1 to 1 relationship? I'd put them together in a container and use parents() to find the container and then find() to look for the business-form-kaufen.
This way, the code is smart enough to look for the business-form-kaufen without the need to hard code the DOM structure.

Select every first unique element by grouping

I have a list of elements which have alternating classes. The occurrences of the classes are random and can occur once or many times in a row.
I am looking a way to select every first occurrence of an element (marked with a -). Preferably, I'd like to do this in CSS but I can work with a JavaScript solution as well.
<div class="type-1"></div> -
<div class="type-1"></div>
<div class="type-1"></div>
<div class="type-2"></div> -
<div class="type-1"></div> -
<div class="type-1"></div>
<div class="type-2"></div> -
<div class="type-2"></div>
<div class="type-1"></div> -
...
Just like this: https://jsfiddle.net/aq8nw21f/
This code uses the CSS adjacent sibling selector, as well as :first-of-type to get the edge case of the first item in the list.
#container > div:first-of-type, .type-1 + .type-2, .type-2 + .type-1 {
color: red;
}
<div id="container">
<span>If you used :first-child, the div below this would not highlight.</span>
<div class="type-1">Yes</div>
<div class="type-1">No</div>
<div class="type-1">No</div>
<div class="type-2">Yes</div>
<div class="type-1">Yes</div>
<div class="type-1">No</div>
<div class="type-2">Yes</div>
<div class="type-2">No</div>
<div class="type-1">Yes</div>
</div>
And a less spectacular JS solution than the CSS one of TW80000:
var els = Array.from(document.querySelectorAll('div[class^="type-"]'));
console.log(els.filter(function(el, index) {
return index === 0 || !el.classList.contains(els[index - 1].classList.item(0));
}));
<div class="type-1">1</div>
<div class="type-1">2</div>
<div class="type-1">3</div>
<div class="type-2">4</div>
<div class="type-1">5</div>
<div class="type-1">6</div>
<div class="type-2">7</div>
<div class="type-2">8</div>
<div class="type-1">9</div>

JQuery not first child selector

I have the following markup:
<div class="feed-item">
<div class="date-header">2012-06-03</div>
</div>
<div class="feed-item">
<div class="todo">Todo</div>
</div>
<div class="feed-item">
<div class="meeting">meeting</div>
</div>
I want to show only the divs of a different class name e.g. class="todo" and keep the "date-header" visible. I have the following javascript"
$('.feed-cluster,.feed-item-container').not('div:first.date-header').not(className).slideUp(speed, function(){
$('.feed-cluster' + className + ',.feed-item-container' + className).slideDown(speed);
});
Everything works fine except the bit where I am trying to exclude the first child with a class name of date-header:
.not('div:first.date-header')
Can anyone suggest an alternative?
$('div.date-header').slice(1);
Should do it.
slice Is the fastest function!
Because :first is a jQuery extension and not part of the CSS specification, queries using :first cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.
Alternative way, which still uses the querySelectorAll function:
$('div.date-header').not(':first');
.not('div:first.date-header') should be .not('.date-header:first')
As #gdoron noted: :first is not part of the css specification, but :not() and :first-child are. It is supported by all major browsers.
So you also could use this to skip the first child using a css selector inside jQuery.
$(".child:not(:first-child)").css("background-color", "blue");
div.child {
background-color: #212121;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="child">
<p>Im a child of .container</p>
</div>
<div class="child">
<p>Im a child of .container</p>
</div>
<div class="child">
<p>Im a child of .container</p>
</div>
</div>
legacy browsers support
If you need to support legacy browsers, or if you are hindered by the :not() selector. You can use the .child + .child selector. Which will also work.
$(".child + .child").css("background-color", "blue");
div.child {
background-color: #212121;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="child">
<p>Im a child of .container</p>
</div>
<div class="child">
<p>Im a child of .container</p>
</div>
<div class="child">
<p>Im a child of .container</p>
</div>
</div>

Categories