Develop Reference

jQuery - Display text when hovered on through `for` loop

I am making a webpage and I am adding a feature; when you hover on a certain div another div will display a certain text. There are 5 elements I want to be able to hover and display text.
I added this feature but it did not work properly - only the last hoverable div displayed the text. I isolated the elements used and moved them to a sandbox to tweak them. No matter what I do (I got it to work by using a bunch of if statements, but I am trying to remove that so it looks neater), only the last div will display the text.
Here is a fiddle of the working version with the many if statements:
https://codepen.io/SynergyOfLife/pen/qBNJboR
setInterval(function(){
var dataArray = ["1","2","3","4","5"]
var isHovered1 = $(`.${dataArray[0]}`).is(":hover");
var isHovered2 = $(`.${dataArray[1]}`).is(":hover");
var isHovered3 = $(`.${dataArray[2]}`).is(":hover");
var isHovered4 = $(`.${dataArray[3]}`).is(":hover");
var isHovered5 = $(`.${dataArray[4]}`).is(":hover");
if (isHovered1) {
$('p').html("TEST")
} else if (isHovered2) {
$('p').html("TEST")
}else if (isHovered3) {
$('p').html("TEST")
} else if (isHovered4) {
$('p').html("TEST")
}else if (isHovered5) {
$('p').html("TEST")
} else {
$('p').html("")
}
}, 300);
div {
height:100px;
width: 100px;
background: blue;
float: left;
}
.viewer {
height: 500px;
width: 500px;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<a>Test</a>
</div>
<div class="2">
<a>Test</a>
</div>
<div class="3">
<a>Test</a>
</div>
<div class="4">
<a>Test</a>
</div>
<div class="5">
<a>Test</a>
</div>
<div class="viewer">
<p></p>
</div>
Here is the version I am trying to perfect:
https://codepen.io/SynergyOfLife/pen/VwjELME
setInterval(function(){
var dataArray = ["1","2","3","4","5"]
var i;
for (i = 0; i < dataArray.length; i++) {
var isHovered = $(`.${dataArray[i]}`).is(":hover");
if (isHovered) {
$('p').html("TEST")
} else {
$('p').html("")
}
}
}, 300);
div {
height:100px;
width: 100px;
background: blue;
float: left;
}
.viewer {
height: 500px;
width: 500px;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<a>Test</a>
</div>
<div class="2">
<a>Test</a>
</div>
<div class="3">
<a>Test</a>
</div>
<div class="4">
<a>Test</a>
</div>
<div class="5">
<a>Only working div?</a>
</div>
<div class="viewer">
<p></p>
</div>
In summary, I am asking for help on how to shorten the number of if statements

Just use the hover() method which accepts two functions, one for mouseenter and one for mouseleave.
var dataArray = ["1", "2", "3", "4", "5"]
var selectors = '.' + dataArray.join(',.');
$(selectors).hover(function() {
// `this` is the element the event occurred on
$('p').html('TEST ' + this.className)
}, function() {
$('p').empty()
})
div {
height: 100px;
width: 100px;
background: blue;
float: left;
}
.viewer {
height: 500px;
width: 500px;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<a>Test</a>
</div>
<div class="2">
<a>Test</a>
</div>
<div class="3">
<a>Test</a>
</div>
<div class="4">
<a>Test</a>
</div>
<div class="5">
<a>Test</a>
</div>
<div class="viewer">
<p></p>
</div>

Create multiple divs with different content

The problem is when duplicate multiple div but with different data-type, it still running a same content, i want correct all div will have the different content following the different data-type.
Is there a way to do this?
$(function() {
// document
'use strict';
var cp = $('div.box');
// unique id
var idCp = 0;
for (var i = 0; i < cp.length; i++) {
idCp++;
cp[i].id = "cp_" + idCp;
}
// diffrent type
if (cp.data('type') == "c1") {
cp.addClass('red').css({
"background: 'red',
"padding": "20px",
"display": "table"
});
$('.box').append('<div class="cp-title">' + 'c1-title' + '</div>');
} else if (cp.data('type') == "c2") {
cp.addClass('green').css({
"background": 'green',
"padding": "20px",
"display": "table"
});
$('.box').append('<div class="cp-title">' + 'c2-title' + '</div>');
} else {
return false;
}
}); //end
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<! it should be like this>
<div class="box" data-type="c1" id="cp_1">
<div class="cp-title">c1 title</div>
</div>
<div class="box" data-type="c2" id="cp_2">
<div class="cp-title">c2 title</div>
</div>
<! currently wrong output>
<div class="box" data-type="c1" id="cp_1">
<div class="cp-title">c1 title</div>
</div>
<div class="box" data-type="c2" id="cp_2">
<div class="cp-title">c1 title</div>
</div>

The problem in your code is that you are not looping inside the div's. You have to use the .each() function while looping inside all the elements
$(function() {
var cp = $('div.box');
cp.each(function() {
var _cp = $(this);
var text = _cp.attr("data-type") + "-title"; //Generate the text dynamically
var cls = _cp.attr("data-class"); //Get the class dynamically
_cp.addClass(cls).append('<div class="cp-title">' + text + '</div>'); //Add the class and append the text to the parent div
});
}); //end
.box{
padding: 20px;
display: table;
}
.red{
background: red;
}
.green{
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-type="c1" data-class="red"></div>
<div class="box" data-type="c2" data-class="green"></div>

Probably you're searching for something like this.
// document.ready
$(function() {
'use strict';
$('.box').each(function(i,elem){
var ref = +$(elem).attr("data-type").match(/\d/)[0], addClass = 'default';
switch(true) {
case ref === 1:
addClass = 'red';
break;
case ref === 2:
addClass = 'green';
break;
}
$(this)
.addClass(addClass)
.append('<div class="cp-title">c'+ref+' title</div>');
});
}); //end
.red{
background: red;
padding: 20px;
display: table;
}.green{
background: green;
padding: 20px;
display: table;
}.default {
background: #2d2d2d;
color: #f6f6f6;
padding: 20px;
display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-type="c1"></div><div class="box" data-type="c2"></div>

Target two fields when searching

I have this layout:
<input id="search">
<div class="entry">
<div class="title">hello</div>
<div class="description">lorem</div>
</div>
<div class="entry">
<div class="title">ipsum</div>
<div class="description">test</div>
</div>
And I allow users to search the entry divs by the content of the title div:
jQuery(document).ready(function() {
jQuery("#search").on("keyup click input", function () {
var val = jQuery(this).val();
if (val.length) {
jQuery(".entry").hide().filter(function () {
return jQuery('.title',this).text().toLowerCase().indexOf(val.toLowerCase()) != -1;
}).show();
}
else {
jQuery(".entry").show();
}
});
});
Works great. Try jsFiddle.
My question is, how do I make it so the search targets both the content of the title div and the description field?

If you want it to search for both title and description use this.
return jQuery('.title, .description',this)
Then it will look like
jQuery(".entry").hide().filter(function () {
return jQuery('.title, .description',this).text().toLowerCase().indexOf(val.toLowerCase()) != -1;
}).show();
Here is a link so you can test it.

In the filter function, you can add an OR condition that can check the description and filter results on title or description.
jQuery(document).ready(function() {
jQuery("#search").on("keyup click input", function() {
var val = jQuery(this).val();
if (val.length) {
jQuery(".entry").hide().filter(function() {
return jQuery('.title, .description', this).text().toLowerCase().indexOf(val.toLowerCase()) != -1;
}).show();
} else {
jQuery(".entry").show();
}
});
});
.entry {
background: #fff;
margin-bottom: 10px;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search">
<div class="entry">
<div class="title">hello</div>
<div class="description">lorem</div>
</div>
<div class="entry">
<div class="title">ipsum</div>
<div class="description">test</div>
</div>

swap div's position from top div's

I am trying to swap a div's position from top on and when I click another div then top div can be swap.
HTML
<div class="wrap top">
<input type="text" value="div1" class="textbox " />
</div>
<div class="wrap">
<input type="text" value="div2" class="textbox " />
</div>
<div class="wrap">
<input type="text" value="div3" class="textbox " />
</div>
jQuery
(function ($) {
$(".wrap").on("click", function () {
if ($(this).index() == 0) {
} else {
$(this).insertBefore($(this).prev());
}
});
}(jQuery));
The fact is I don't want to remove the div which I click instead want to swap the positions around.
How Can I do this using jQuery itself?

I would suggest using css to position the top div and just swap the class as follows:
(function ($) {
$(".wrap").on("click", function () {
if ($(this).index() == 0) {
} else {
$(".wrap").removeClass("top");
$(this).addClass("top");
}
});
}(jQuery));

this will swap whatever you click with the first element.
$(".wrap").on("click", function () {
var $this = $(this);
if ($this.index() == 0) {
} else {
var first = $this.siblings('.wrap').first();
first.insertBefore($this);
$this.prependTo($this.parent());
}
});
if you just want to move the clicked element to the top, you can simply do
$this.prependTo($this.parent());

To swap the two DOM elements using jQuery, you could use something like this: -
(function($) {
$(".wrap").on("click", function(event) {
var index = $(event.target).index();
var first = $(".wrap").first();
if (index > 0) {
$(first).swapWith(this);
}
});
}(jQuery));
jQuery.fn.swapWith = function(to) {
return this.each(function() {
var copy_to = $(to).clone(true);
var copy_from = $(this).clone(true);
$(to).replaceWith(copy_from);
$(this).replaceWith(copy_to);
});
};
.wrap {
height: 100px;
width: 200px;
margin: 10px 10px 10px 10px;
background-color: #2d8cd0;
}
h2 {
color: white;
text-align: center;
padding-top: 20px;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrap">
<h2>1</h2>
</div>
<div class="wrap">
<h2>2</h2>
</div>
<div class="wrap">
<h2>3</h2>
</div>
<div class="wrap">
<h2>4</h2>
</div>

Do not run jQuery function when <a> tag clicked

I currently work with some jQuery, where i have got some problems.
I got this code
if ($(".accordion").length > 0) {
$(".accordion").each(function() {
var item = $(this).find(".accordion-text");
var height = item.outerHeight() + 20;
item.data("height", height + "px").css("height", "0px");
})
}
$(".accordion").on("click", function(e) {
foldOut($(this));
});
function foldOut(accordien) {
console.log(accordien);
var item = $(accordien).find(".accordion-text");
if ($(accordien).hasClass("accordion-open")) {
$(item).stop().transition({
height: '0px'
}, 500, 'in-out');
$(accordien).find(".accordionArrow").removeClass("accordionBgActive");
console.log($(accordien).find(".accordionArrow"));
} else {
$(accordien).find(".accordionArrow").addClass("accordionBgActive");
$(item).stop().transition({
height: item.data("height")
}, 500, 'in-out');
}
$(accordien).toggleClass("accordion-open");
}
But inside the div that is folding out, there may be an a tag, and when i click on the a tag it opens the link but also folds the div..
How can i get the div not to fold when the click is on an a tag?
HTML Where its "closed"
<div class="row">
<div class="overflow-hide rel">
<div class="accordion rel col-md-12 no-pad">
<div class="accordionHeaderDiv">
<h3>Test</h3>
<div class="accordion-header-teaser">
<p>TestTestTestTestTestTestTestTestTestTest</p>
</div>
</div>
<div class="accordion-text" style="height: 0px;">
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>Test</p>
</div>
<div class="accordionArrow" style=" position: absolute; top: 0; cursor: pointer; right: 43px; height: 30px;"></div>
</div>
<div class="clearfix"></div>
</div>
</div>

Filter it out regarding event target:
$(".accordion").on("click", function(e) {
if(e.target.tagName.toLowerCase() === "a") return;
foldOut($(this));
});
As anchor can contains other contents, a more relevant way would be:
$(".accordion").on("click", function (e) {
if ($(e.target).closest('a').length) return;
foldOut($(this));
});