Develop Reference

How to add and remove class dynamically to child div based on value in Jquery

if data value is matching with any div inside requestsampler class then dynamically add new class(sampleClass) to test class inside the matching container
js:
var data = **somevalue**;
data is dynamic value
html:
<div class="requestsampler">
<div class= "**somevalue**">
<div class="test"> // add new class <div class="test sample class">
//
</div>
</div>
<div class= "somevalue2">
<div class="test">
//
</div>
</div>
<div class= "somevalue3">
<div class="test">
//
</div>
</div>
</div>
tried not working:
$('.requestsampler').hasClass(data) {
$(.'requestsampler .`${data}` .test').addClass('sampleclass');
}

You could simply use Attribute Contains Prefix Selector [name|="value"] for more info please refer http://jqapi.com/#p=attribute-contains-prefix-selector.. below is the code for your example.
$(document).ready(()=>{
var data = "somevalue"; $('div[class|="'+data+'"]>.test').addClass("sampleclass");
})
.sampleclass{
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="requestsampler">
<div class= "somevalue">
<div class="test"> // add new class <div class="test sample class">
//
</div>
</div>
<div class= "somevalue2">
<div class="test">
//
</div>
</div>
<div class= "somevalue3">
<div class="test">
//
</div>
</div>
</div>

you could try jquery elem.find() api. And also use className with string and numeric combination instead of symbols
i have changed the condition with element find length. Because hasClass() only perform on the selector element. So if you are using find() they will find the matched element.
And also your if condition does not make any sense, without condition is also working same
Updated
If you need first test element. use .eq(0) or else use different className for the first test element
var data = "somevalue";
if ($('.requestsampler').find(`.${data}`).length > 0) {
$('.requestsampler').find(`.${data}`).find('.test').eq(0).addClass('sampleclass');
}
.sampleclass {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="requestsampler">
<div class="somevalue">
<div class="test"> // add new class
<div class="test sample class">
sample
</div>
</div>
<div class="somevalue2">
<div class="test">
//
</div>
</div>
<div class="somevalue3">
<div class="test">
//
</div>
</div>
</div>

Link simillary name classes so that when one is clicked the other is given a class

Basically, I'm asking for a way to optimize this code. I'd like to cut it down to a few lines because it does the same thing for every click bind.
$("#arch-of-triumph-button").click(function(){
$("#arch-of-triumph-info").addClass("active-info")
});
$("#romanian-athenaeum-button").click(function(){
$("#romanian-athenaeum-info").addClass("active-info")
});
$("#palace-of-parliament-button").click(function(){
$("#palace-of-parliament-info").addClass("active-info")
});
Is there a way to maybe store "arch-of-triumph", "romanian-athenaeum", "palace-of-parliament" into an array and pull them out into a click bind? I'm thinking some concatenation maybe?
$("+landmarkName+-button").click(function(){
$("+landmarkName+-info").addClass("active-info")
});
Is something like this even possible?
Thanks in advance for all your answers.
EDIT: Here's the full HTML.
<div class="landmark-wrapper">
<div class="page-content landmark">
<div class="heading span-after">
<span>Arch of Triumph</span>
</div>
<div class="landmark-button" id="arch-of-triumph-button"></div>
</div>
</div>
<div class="landmark-wrapper">
<div class="page-content landmark">
<div class="heading span-after">
<span>Romanian Athenaeum</span>
</div>
<div class="landmark-button" id="romanian-athenaeum-button"></div>
</div>
</div>
----------------------------------------------------------
<div class="landmarks-info-wrapper">
<div class="landmark-info" id="arch-of-triumph-info">
<div class="info-landmark section">
<span class="landmark-title">Arch of Triumph</span>
<span class="landmark-coord">44°28′1.99″N 26°4′41.06″E</span>
</div>
</div>
<div class="landmark-info" id="romanian-athenaeum-info">
<div class="info-landmark section">
<span class="landmark-title">The Romanian Athenaeum</span>
<span class="landmark-coord">44.4413°N 26.0973°E</span>
</div>
</div>

Assuming you're not able to modify your HTML markup (in which case with use of CSS classes would be cleaner), a solution to your question would be as shown below:
// Assign same click handler to all buttons
$("#arch-of-triumph-button, #romanian-athenaeum-button, #palace-of-parliament-button")
.click(function() {
// Extract id of clicked button
const id = $(this).attr("id");
// Obtain corresponding info selector from clicked button id by replacing
// last occurrence of "button" pattern with info.
const infoSelector = "#" + id.replace(/button$/gi, "info");
// Add active-info class to selected info element
$(infoSelector).addClass("active-info");
});

Because each .landmark-button looks to be in the same order as its related .landmark-info, you can put both collections into an array, and then when one is clicked, just find the element with the same index in the other array:
const buttons = [...$('.landmark-button')];
const infos = [...$('.landmark-info')];
$(".landmark-button").click(function() {
const i = buttons.indexOf(this);
$(infos[i]).addClass('active-info');
});
This does not rely on IDs at all - feel free to completely remove those from your HTML to declutter, because they don't serve any purpose now that they aren't being used as selectors.
Live snippet:
const buttons = [...$('.landmark-button')];
const infos = [...$('.landmark-info')];
$(".landmark-button").click(function() {
const i = buttons.indexOf(this);
$(infos[i]).addClass('active-info');
});
.active-info {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="landmark-wrapper">
<div class="page-content landmark">
<div class="heading span-after">
<span>Arch of Triumph</span>
</div>
<div class="landmark-button" id="arch-of-triumph-button">click</div>
</div>
</div>
<div class="landmark-wrapper">
<div class="page-content landmark">
<div class="heading span-after">
<span>Romanian Athenaeum</span>
</div>
<div class="landmark-button" id="romanian-athenaeum-button">click</div>
</div>
</div>
----------------------------------------------------------
<div class="landmarks-info-wrapper">
<div class="landmark-info" id="arch-of-triumph-info">
<div class="info-landmark section">
<span class="landmark-title">Arch of Triumph</span>
<span class="landmark-coord">44°28′1.99″N 26°4′41.06″E</span>
</div>
</div>
<div class="landmark-info" id="romanian-athenaeum-info">
<div class="info-landmark section">
<span class="landmark-title">The Romanian Athenaeum</span>
<span class="landmark-coord">44.4413°N 26.0973°E</span>
</div>
</div>
Older answer, without knowing the HTML: You can extract the ID of the clicked button, slice off the button part of it, and then select it concatenated with -info:
$(".landmark-button").click(function() {
const infoSel = this.id.slice(0, this.id.length - 6) + 'info';
$(infoSel).addClass('active-info');
});
A much more elegant solution would probably be possible given the HTML, though.

How to get to specific element in jquery

I have HTML structureL
<div class="services-article-elements-single">
<div class="services-article-description">
<button class="services-article-read-more-btn">read more</button>
</div>
<div class="services-article-after-roll"></div>
</div>
I want after clicking a button something happen with my <div class="services-article-after-roll"></div>
So far, I have:
jQuery('.services-article-read-more-btn').click(() =>{
// ????????
})
I think the appropriate method is find() but I'm not sure

Just select your element. In this case, you can select you element by class. In my simple example, the button shows or hides a div.
$('.services-article-read-more-btn').click(function() {
$(".services-article-after-roll").toggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="services-article-elements-single">
<div class="services-article-description">
<button class="services-article-read-more-btn">My button</button>
</div>
<div class="services-article-after-roll">MY DIV</div>
</div>
EDIT: if you have a structure with more than one div with class services-article-elements-single, you can select a wrapper div using .closest() and then find the element inside that container using .find() function.
$('.services-article-read-more-btn').click(function() {
var elementWrapper = $(this).closest(".services-article-elements-single");
elementWrapper.find(".services-article-after-roll").toggle();
})
.services-article-elements-single {
padding: 10px;
margin: 10px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="services-article-elements-single">
<div class="services-article-description">
<button class="services-article-read-more-btn">My button</button>
</div>
<div class="services-article-after-roll">MY DIV</div>
</div>
<div class="services-article-elements-single">
<div class="services-article-description">
<button class="services-article-read-more-btn">My button</button>
</div>
<div class="services-article-after-roll">MY DIV</div>
</div>
<div class="services-article-elements-single">
<div class="services-article-description">
<button class="services-article-read-more-btn">My button</button>
</div>
<div class="services-article-after-roll">MY DIV</div>
</div>

jQuery itself is a function which allows selecting elements. You can just use jQuery('.services-article-after-roll') and you will get the element.
jQuery('.services-article-read-more-btn').click(() => {
const $servicesArticleAfterRoll = jQuery('.services-article-after-roll');
// ... do stuff
})

Assuming you have more than one 'roll', you'll need to use a context specific selector - that just means use this within the event handler:
$(".services-article-read-more-btn").click(function() {
$(this).closest(".services-article-elements-single")
.find(".services-article-after-roll")
.fadeIn();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="services-article-elements-single">
<div class="services-article-description">
<button class="services-article-read-more-btn">read more</button>
</div>
<div class="services-article-after-roll" style='display:none;'>more info</div>
</div>
<div class="services-article-elements-single">
<div class="services-article-description">
<button class="services-article-read-more-btn">read more</button>
</div>
<div class="services-article-after-roll" style='display:none;'>more info</div>
</div>
Where .closest finds the closest parent with that class (the containing div) and then .find goes back down within that div to find the related details.

To achieve what you require you can use DOM traversal. In the click handler you can use closest() to get the nearest common parent element to the one which raised the event and the one you want to target. Then you can use find() to get that element before amending it as required. In the example below I just toggle a class to hide/show them:
$('.services-article-read-more-btn').click(function() {
$(this).closest('.services-article-elements-single').find('.services-article-after-roll').toggleClass('show');
})
.services-article-after-roll {
display: none;
}
.services-article-after-roll.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="services-article-elements-single">
<div class="services-article-description">
<button class="services-article-read-more-btn">read more</button>
</div>
<div class="services-article-after-roll">After roll...</div>
</div>
<div class="services-article-elements-single">
<div class="services-article-description">
<button class="services-article-read-more-btn">read more</button>
</div>
<div class="services-article-after-roll">After roll...</div>
</div>

if one item is clicked, remove the other items?

I'm learning Javascript and jQuery and I'm stuck at this one problem. Let's say my code looks like this:
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Now, if i click one of the div's, i want the other ones to disappear.
I know, I could create 4 functions for each one of them with on.click hey and display none with how , are and you. But is there a easier way? I bet there is, with classes maybe?
Thanks for responding!

Use siblings to get reference to its "brothers".
Given a jQuery object that represents a set of DOM elements, the .siblings() method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements.
$('div').click(function(){
$(this).siblings().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Or you can hide all the other div which not the clicked element using not
Remove elements from the set of matched elements.
$('div').click(function() {
$('div').not(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>

You can just hide siblings() of clicked div.
$('div').click(function() {
$(this).siblings().fadeOut()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey">hey</div>
<div id="how">how</div>
<div id="are">are</div>
<div id="you">you</div>

Yeah there are some easier ways and I could tell a one from it,
Set a common class to all the elements that you are gonna target,
<div class="clickable" id="hey"> hey </div>
<div class="clickable" id="how"> how </div>
<div class="clickable" id="are"> are </div>
<div class="clickable" id="you"> you </div>
And you have to bind a single click event by using a class selector,
$(".clickable").on("click", function(){ });
Now use the .siblings() functions to hide the required elements,
$(".clickable").on("click", function(){
$(this).siblings(".clickable").hide();
});
But using a toggle instead of hide would sounds logical,
$(".clickable").on("click", function(){
$(this).siblings(".clickable").toggle();
});
Since you can do the same operation over all the elements.

You can use not to avoid element and this will indicate current instance.
$(document).ready(function(){
$("div").on("click",function(){
$("div").not(this).hide("slow");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>

Assign a class to each of the elements:
<div id="hey" class='sth'> hey </div>
<div id="how" class='sth'> how </div>
<div id="are" class='sth'> are </div>
<div id="you"class='sth' > you </div>
And write a js function onclick.
Remove class 'sth' from 'this' element in this function
Hide all elements with class 'sth' $('.sth').hide();

For this example - you don't need to add any further selectors to target the div's although in reality - this solution wwould cause all divs on the page to be affectecd - adding classes would be my actual suggestion: - but this works for this example. Click a div and all divs are hidden then the clicked one is shown. I also added a reset button to allow all divs to reappear.
$('div').click(function(){
$('div').hide();
$(this).show();
});
$('#reset').click(function(){
$('div').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
<hr/>
<button type="button" id="reset">Reset</button>

$(document).ready(function(){
$("div").on("click",function(){
$("div").not(this).toggle("slow");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>

javascript - select a div within a particular div

The content of the divs is going to be populated with javascript json. Now, I know how to select a div in javascript:
var hsc = document.getElementByID("hsc");
But how would I refer to eg. the title but only in the hsc div.
<div id="hsc">
<div id="title"></div>
<div id="jobs"></div>
...
</div>
<div id="cc">
<div id="title"></div
<div id="jobs"></div>
</div>
On a separate note, wouldn't 'title' and 'jobs' be better classified as classes, and not ids?

This would work:
var hsc = document.querySelectorAll("#hsc > .title");
But you need to change to valid html and use unique IDs and classes instead:
<div id="hsc">
<div class="title"></div>
<div class="jobs"></div>
...
</div>
<div id="cc">
<div class="title"></div>
<div class="jobs"></div>
</div>

IDs must be unique in HTML.
Change them to classes, and then you can use querySelector() to target them:
document.querySelector('.hsc .title').style.color= 'blue';
document.querySelector('.cc .title').style.color= 'red';
<div class="hsc">
<div class="title">Make me blue!</div>
<div class="jobs">Jobs</div>
</div>
<div class="cc">
<div class="title">Make me red!</div>
<div class="jobs">More jobs</div>
</div>

Just try
<div id="hsc">
<div id="a" class="title"></div>
<div id="b" class="jobs"></div>
...
</div>
<div id="cc">
<div id="c" class="title"></div
<div id="d"class="jobs"></div>
</div>
Because your HTML code is invalid because the id is already taken.