Applying behavior to specific div within elements with same class - javascript

I am trying to hide div with class="input" only when hidden-span is equal to i-am-secret.
I've tried different approaches using .each(function) or .next() but could not get my head around it. In order to illustrate the example I've added the code bellow.
Please note that I can not add any id's or classes and the order of the rows may vary.
(function($) {
$('.basket__item-row').each(function() {
if ($('.hidden-span').is(":contains('i-am-secret')")) {
$(this).next().hide();
}
});
})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="basket__item-row">
<div class="image">
<div>
I am normal div
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
<div class="basket__item-row">
<div class="image">
<div>
I am extra div
<span class="hidden-span">i-am-secret</span>
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
<div class="basket__item-row">
<div class="image">
<div>
I am normal div
<span class="hidden-span">another class</span>
</div>
</div>
<div class="input">
Please hide me
</div>
</div>


I would do a traversal this way...
$('.hidden-span') // Target all the hidden spans.
.filter(function () { // Filter all the span that contains the text.
return $(this).text().indexOf("i-am-secret") !== false;
})
.closest(".image") // Get the parent `.image`.
.next(".input") // Get the `.input` which is its sibling.
.hide(); // Hide it.
(function($) {
$('.hidden-span').filter(function () {
return $(this).text().indexOf("i-am-secret") !== false;
}).closest(".image").next(".input").hide();
})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="basket__item-row">
<div class="image">
<div>
I am normal div
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
<div class="basket__item-row">
<div class="image">
<div>
I am extra div
<span class="hidden-span">i-am-secret</span>
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
<div class="basket__item-row">
<div class="image">
<div>
I am normal div
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
Please correct the syntax errors. It should be class="basket__item-row".

Related

javascript remove parent div where particular class appears in hierarchy below

First time question on this site. Sorry if I have failed the formatting test.
I am almost completely ignorant about javascript but I have been told I need it to solve this problem. I have a page where there are multiple divs with the same class. Each has a multi-level hierarchy beneath it. I want to stop the parent displaying if any of its children contain a div of a particular class. e.g. In the following code I want to stop all divs with class of "classa" displaying if one of their direct or indirect children contains class of "classb draft". So here, none of divb would display.
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa"
<div id="divabaaa" class="classb">
</div>
</div>
</div>
</div>
</div>
<div id="divb" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa"
<div id="divbbaaa" class="classb draft">
</div>
</div>
</div>
</div>
</div>

You are not closing div in
<div id="divabaa"
You can use querySelectorAll() to select all the children with that class (draft). Then use forEach() to loop through all the matching elements to find the closest() div with .classa to set display property to none.
var elements = document.querySelectorAll('.classa .draft');
elements.forEach(function(el){
el.closest('.classa').style.display = 'none';
});
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa">
<div id="divabaaa" class="classb">
Without Draft
</div>
</div>
</div>
</div>
</div>
<div id="divs" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa">
<div id="divbbaaa" class="classb draft">
Draft
</div>
</div>
</div>
</div>
</div>

How to do change image when users click thumbnail?

I want to change selected (or default) image when users clicked other images thumbs. I tried that with below codes but dosen't work.. Where do I mistake in here ?
Here are simple jquery codes;
<script>
$('img.thumbnail').click(function () {
$('#productImage').attr('src',$(this).attr('src').replace('60/60','400/200'));
})
</script>
and html;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-5">
<img id="productImage" src='http://via.placeholder.com/400/200?text={{$product->product_name}}'>
<hr>
<div class="row">
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage1">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage2">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage3">
</div>
</div>

Your img doen't contain class .thumbnail it is opposite like this,
$('.thumbnail img').click(function () {
$('#productImage').attr('src', $(this).attr('src').replace('60/60','400/200'));
});
And also check your <img> tag.

You were not calling the right selector.
$('a.thumbnail').click(function () {
$('#productImage').attr('src',$(this).children('img').attr('src').replace('60/60','400/200'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-5">
<img id="productImage" src='https://via.placeholder.com/400/200?text=nothing'>
<hr>
<div class="row">
<div class="col-xs-3">
<img src="https://via.placeholder.com/60/60?text=otherimage1">
</div>
<div class="col-xs-3">
<img src="https://via.placeholder.com/60/60?text=otherimage2">
</div>
<div class="col-xs-3">
<img src="https://via.placeholder.com/60/60?text=otherimage3">
</div>
</div>

Try attaching the click event to a.thumbnail elements and than do a jQuery.find('img') to get the thumbnail image's src attribute:
$('a.thumbnail').click(function () {
var src = $(this).find('img').attr('src').replace('60/60','400/200');
$('#productImage').attr('src', src);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-5">
<img id="productImage" src="http://via.placeholder.com/400/200?text=otherimage0">
<hr>
<div class="row">
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=UrunResimi1">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage2">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage3">
</div>
</div>

$(document).ready(function(){
$('.thumbnail img').click(function () {
$('#productImage').attr('src',$(this).attr('src').replace('60/60','400/200'));
});
});
Your jquery selector is incorrect. It should be in this format and make sure you have document.ready function to make it work properly in all the browsers online or offline.
Plnkr Link

A search box that searches for a specific tag composed of nested DIVs and shows the desire content and hides other data

New to this thing. Any idea how do i sort it in a specific data. For further explanation: If i search a name of a brand the out put will be show only the desire brand in A area.
$("#search")..on("keyup", function() {
var key = this.value;
$(".tosearch").each(function() {
var $this = $(this);
$this.toggle($(this).text().indexOf(key) >= 0);
});
});
Search: <input id='search'></input>
<div class="tosearch">
<div>
<h2>A</h2>
<div> Back to the top</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/agv-logo-120x120.jpg" />AGV
<div class="tosearch">AGV</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/altamont-logo-120x120.jpg" />ALTAMONT
<div class="tosearch">ALTAMONT</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/arbor-logo-120x120.jpg" />ARBOR
<div class="tosearch">ARBOR</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/almost-logo2-120x120.jpg" />ALMOST
<div class="tosearch">ALMOST</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/alpinestars-logo-120x120.jpg" />ALPINESTARS
<div class="tosearch">ALPINESTARS</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/answer-racing-logo-120x120.jpg" />ANSWER RACING
<div class="tosearch">ANSWER RACING</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/arai-logo-120x120.jpg" />ARAI
<div class="tosearch">ARAI</div>
</div>
</div>

If I understand correctly this is what you are looking for.
I removed the .tosearch class from the container div, otherwise it would also be filtered.
Currently it filters by the start of the word. A good idea is to use toLowerCase() so the filter is case insensitive. Currently it also hides the image by calling the toggle() on parent().
$("#search").on("keyup", function() {
var key = this.value;
$(".tosearch").each(function() {
$(this).parent().toggle($(this).text().toLowerCase().startsWith(key.toLowerCase()));
});
});
Search: <input id='search'></input>
<div>
<div>
<h2>A</h2>
<div> Back to the top</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/agv-logo-120x120.jpg" />AGV
<div class="tosearch">AGV</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/altamont-logo-120x120.jpg" />ALTAMONT
<div class="tosearch">ALTAMONT</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/arbor-logo-120x120.jpg" />ARBOR
<div class="tosearch">ARBOR</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/almost-logo2-120x120.jpg" />ALMOST
<div class="tosearch">ALMOST</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/alpinestars-logo-120x120.jpg" />ALPINESTARS
<div class="tosearch">ALPINESTARS</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/answer-racing-logo-120x120.jpg" />ANSWER RACING
<div class="tosearch">ANSWER RACING</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/arai-logo-120x120.jpg" />ARAI
<div class="tosearch">ARAI</div>
</div>
</div>

Trying to filter non-hovered elements with jquery

I have an image gallery. Basically I am trying to go for something that lets the hovered image maintain its styling properties but the background (non-hovered images, I should say) filter to grayscale.
This is my first project and I am trying to push myself. I am making some mistakes but learning from each one. Your help is appreciated.
HTML:
<section id="image-gallery">
<div class="container">
<div id="imageboxing" class="disciplines">
<img src="images/martial-arts-banner/boxing.png">
<div class="imagetext">
<h3>BOXING</h3>
</div>
</div>
<div id="imagekb" class="disciplines">
<img src="images/martial-arts-banner/kickboxing.png">
<div class="imagetext">
<h3>KICKBOXING</h3>
</div>
</div>
<div id="muaythai" class="disciplines">
<img src="images/martial-arts-banner/muaythai.png">
<div class="imagetext">
<h3>MUAYTHAI</h3>
</div>
</div>
<div id="wrestling" class="disciplines">
<img src="images/martial-arts-banner/wrestling.png">
<div class="imagetext">
<h3>WRESTLING</h3>
</div>
</div>
<div class="clear"></div>
</div>
</section>
JQUERY:
$(document).ready(function() {
$(".disciplines img").hover(function(){
var images = $(".disciplines img");
$(this).toggleClass("active-image");
$(this).css("cursor", "pointer");
$(this).next().find('h3').slideToggle();
if (images.not(".active-image") {
$(images).css("filter", blur("20px"));
}
});

You have to do it like below:-
$(document).ready(function() {
$("#image-gallery img").hover(function(){ // on hover of image
$(this).toggleClass("active-image");
$(this).css("cursor", "pointer");
$(this).parent().css({"filter": ""}); //remove it's parent filter css
$('img').not($(this)).parent().css({"filter":'blur(5px)'}); //add filter css to all othe images parent-div apart from thr current clicked-one
}, function () { //when hover-out
$('.disciplines').css({"filter": ""}); //remove filter css from all div
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="image-gallery">
<div class="container">
<div id="imageboxing" class="disciplines">
<img src="https://ae01.alicdn.com/kf/HTB1dizJKFXXXXa_XFXXq6xXFXXXs/Closed-Type-Boxing-Helmet-Head-Protector-For-Taekwondo-Karate-Tai-MMA-Muay-Thai-Kickboxing-Competition-Training.jpg_50x50.jpg">
<div class="imagetext">
<h3>BOXING</h3>
</div>
</div>
<div id="imagekb" class="disciplines">
<img src="http://www.days-gym.com/wp-content/uploads/2015/11/days-gym-website-logo.png">
<div class="imagetext">
<h3>KICKBOXING</h3>
</div>
</div>
<div id="muaythai" class="disciplines">
<img src="https://i.pinimg.com/favicons/50x/ded1fa7e09a93f576a8dc1060fbf82f7e63076e47a08abd0cf27887f.png?ca1416448b5d5bfb6c7465ba2cb5e0d4">
<div class="imagetext">
<h3>MUAYTHAI</h3>
</div>
</div>
<div id="wrestling" class="disciplines">
<img src="https://iawrestle.files.wordpress.com/2017/06/screen-shot-2017-06-14-at-10-35-09-am.png?w=50&h=50&crop=1">
<div class="imagetext">
<h3>WRESTLING</h3>
</div>
</div>
<div class="clear"></div>
</div>
</section>

Change innerhtml of each first column in each row

I want to change the innerHTML of each column in each row, but I cant get it to work properly.
var numOfRows = $('.wrap').children('.row').length;
for (var i = 0; i < numOfRows; i++) {
var $firstDiv = $(".input_fields_wrap .row:eq(0)");
$firstDiv.text("Works");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
</div>
How could I properly go about this and change the innerHTML of each column in each row?

You can use something like this, too:
$('.row').each(function(i) {
$(this).children().first().text('changed '+i);
});
Demo: https://jsfiddle.net/c1hcL26m/

Please do like bellow.
$( ".row div:first-child").text("Some text")

You can use :first-child selector
Selects all elements that are the first child of their parent.
To use index, You can use .text(function)/.html(function)
$('.wrap .row .col-md-4:first-child').text(function(i) {
return 'Changed Text: ' + (i+1);
});
$('.wrap .row .col-md-4:first-child').text(function(i) {
return 'Changed Text: ' + (i+1);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
</div>

javascript approach
document.querySelectorAll('.row div:first-child').forEach(function(r){r.innerHTML = "MYchangedtext"})

Try this out
$(".wrap .row .col-md-4:first-child").text("Hello world!");

UPDATE
I now understand OP's request is to change the content of the first column only. Using this selector pattern we are able to accurately target desired elements. The use of .each() allows us to iterate through each target and modify the content and give each one a unique number as well.
var firstCols = $('div > div > div:first-of-type')
This selector is saying:
Find the divs that are the first child div...
...of a div (mom) and that div must...
...have a div parent as well (grandma).
OLD
Each column of each row equates to all cells or with this Bootstrap layout it would mean all div.col-md-4. I noticed the "CHANGE" and "DONT CHANGE" pattern, is that what you really want instead?
$('.col-md-4').html('NEW CONTENT');
SNIPPET
var firstCols = $('div > div > div:first-of-type');
firstCols.each(function(idx, obj) {
$(this).html('ROW' + (idx + 1)).css('background', 'cyan');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
</div>
</body>
</html>

Do a loop on your .row and find the first div and change the text. use the below logic
$(".wrap .row").each(function(i){
$(this).find('div:eq(0)').text("Changed "+ i );
});
Here is a working snippet
$(".wrap .row").each(function(i){
$(this).find('div:eq(0)').text("Changed "+ i );
$(this).find('div:eq(0)').css('background-color','yellow'); //demo purpose
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
</div>

Categories