We Keep Coding

Selecting the first instance of a html class with jQuery

I'm having some trouble with jQuery overwriting the elements of a particular parent class. For instance, I have two classes that have the same name but I am looking only to use the first instance for a particular purpose and then the others for something else, but the data inside keeps being overwritten by the next function I am using. I think I know why it is doing it, I'm just unsure of how to fix it so it doesn't.
Here is my jQuery code:
function buildFriendStatus() {
$.getJSON('/members/feed/get-friend-status', function(data) {
var notFirstElement = $('.w3-container.w3-card-2.w3-white.w3-round.w3-margin:not(first)')
$.each(data, function(i, item) {
var element = notFirstElement.eq(i);
element.find('h4').html(data[i].username);
element.find('p').html(data[i].status);
element.find('img').attr('src', data[i].images);
});
}).fail(function(response) {
console.log(response.fail);
});
}
function buildSelfStatus() {
$.getJSON('/members/feed/list-own-status', function(data) {
$.each(data, function(i, item) {
$('.w3-container.w3-card-2.w3-white.w3-round.w3-margin:first').find('h4').html(data[i].username);
$('.w3-container.w3-card-2.w3-white.w3-round.w3-margin:first').find('p').html(data[i].status);
$('.w3-container.w3-card-2.w3-white.w3-round.w3-margin:first').find('img').attr('src', data[i].images);
});
}).fail(function(response) {
console.log(response.fail);
});
}
setInterval(function() {
buildFriendStatus();
}, 1000);
and then the html/calling of the functions
<script type="text/javascript">
buildSelfStatus();
buildFriendStatus();
</script>
<!-- always have this first (sticky) for the user status -->
<div class="w3-container w3-card-2 w3-white w3-round w3-margin">
<h4></h4>
<p></p>
<div class="w3-row-padding" style="margin: 0 -16px;">
<div class="w3-half">
<img src="" style="width: 100%; height: 200px;" alt="<?php echo $this->identity() . "'s image"; ?>" class="w3-margin-bottom w3-round w3-border">
</div>
</div>
</div>
<div class="w3-container w3-card-2 w3-white w3-round w3-margin">
<h4></h4>
<p></p>
<div class="w3-row-padding" style="margin: 0 -16px">
<div class="w3-half">
<img src="" style="width: 100%; height: 200px;" alt="<?php echo "Image"; ?>" class="w3-margin-bottom w3-round w3-border">
</div>
</div>
<button type="button" class="w3-btn w3-theme-d1 w3-margin-bottom">
<i class="fa fa-thumbs-up"></i> Like
</button>
<button type="button" class="w3-btn w3-theme-d2 w3-margin-bottom">
<i class="fa fa-comment"></i> Comment
</button>
</div>
Here is a screenshot of the issue.
Updated screenshot (shows the first image but not the other result(s) now)
Any help would be appreciated
Thanks!
Oh, on another note, is there a way to use jQuery to put data inside the class but have the class be shown more than once without overwriting the data previously added but only have one <div> element with the class name? Sort of like the screenshot attached but just not overwriting each class the same time. Just curious as I couldn't find anything regarding this. I guess I mean build the div element and it's child elements dynamically based on the results retrieved via $.getJSON.

$(".getfirst").click(function(){
alert($(".testdiv").first().text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testdiv">
33
</div>
<div class="testdiv">
44
</div>
<div class="testdiv">
55
</div>
<div class="testdiv">
66
</div>
<div class="getfirst" style="width:150px; height:50px; background-color:red;">
get me!!
</div>
Why dont you use .first() of jQuery?
For example lets say you have 4 divs with same class but you want to get the text of the first div element with the specific class name:
<div class="testdiv">33</div>
<div class="testdiv">44</div>
<div class="testdiv">55</div>
<div class="testdiv">66</div>
<div class="getfirst" style="width:150px; height:50px; background-color:red;">
get me!!
</div>
$(".getfirst").click(function(){
alert($(".testdiv").first().text());
});

just added another class to the first element.

Sliding box/menu with 3 options

I'm trying to make a box with a title and 2 arrows left and right of the title. When you click on either arrow, the box should fade out and the next one should fade in. I have another one like this on my page with 2 option (send and go back) and that one works fine, but for some reason it breaks when I have 3 options. I suspect it's my jQuery code that breaks when adding a third option.
My JSFiddle (minimal CSS to avoid confusion, the problem isn't there)
$('#go2').click(function(e) {
$('.box1, .box3').fadeOut('fast', function() {
$('.box2').fadeIn('slow');
});
});
$('#go3').click(function(e) {
$('.box2, .box1').fadeOut('fast', function() {
$('.box3').fadeIn('slow');
});
});
$('#go1').click(function(e) {
$('.box2, .box3').fadeOut('fast', function() {
$('.box1').fadeIn('slow');
});
});

The IDs must be unique (refer to id="go2").
The jQuery library must be included before the other libs.
You can simplify everything using a unique handler:
$('.box1, .box2, .box3').on('click', function(e) {
var isArrowRight = $(e.target).is('.right');
var isLeftArrow = $(e.target).is('.left');
if (!(isArrowRight || isLeftArrow)) {
return; // do nothing if you don't click the left/right arrow...
}
var nextEle = (isArrowRight) ? $(this).next('[class^=box]') : $(this).prev('[class^=box]');
if (nextEle.length == 0) {
nextEle = (isArrowRight) ? $('.box1') : $('.box3');
}
$('.box1:visible, .box2:visible, .box3:visible').fadeOut('fast', function(){
nextEle.fadeIn('slow');
});
});
i {
display: inline;
}
h1 {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap..css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/components/icon.min.css">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.js"></script>
<div class="box1">
<div class="boxTitle">
<i id="go3" class="icon angle left"></i>
<h1>Box 1</h1>
<i id="go22" class="icon angle right"></i>
</div>
<div class="boxField1">
Boxfield 1
</div>
</div>
<div class="box2" style="display: none">
<div class="boxTitle">
<i id="1" class="icon angle left"></i>
<h1>Box 2</h1>
<i id="3" class="icon angle right"></i>
</div>
<div class="boxField2">
Boxfield 2
</div>
</div>
<div class="box3" style="display: none">
<div class="boxTitle">
<i id="go2" class="icon angle left"></i>
<h1>Box 3</h1>
<i id="go1" class="icon angle right"></i>
</div>
<div class="boxField3">
Boxfield 3
</div>
</div>

Sorry but looking your jsfiddle file I see 2 problems:
you use the same id for more html tag, it's not possible try using class.
On the box2 you use id="1" and id="3" but on js you use go1, go2, go3.

Jquery - Open .next

I am trying to create a script that only opens the next div called .video-overlay.
I do not want to use ID's as there could be up to 30 videos per page.
JS Fiddle: https://jsfiddle.net/w2fqrzbw/
At the moment the script is affecting both... is there a way of targetting the next div named .video-overlay?
HTML:
<span class="video-trigger">Button 1 </span>
<!-- Close video trigger-->
<div class="video-overlay">
<div class="overlay-close">Close</div>
<div class="container">
Popup 1
</div>
</div>
<!-- Close video popup-->
<br><br/>
<br><br/>
<br><br/>
<span class="video-trigger">Button 2</span>
<!-- Close video trigger-->
<div class="video-overlay">
<div class="overlay-close">Close</div>
<div class="container">
Popup 2
</div>
</div>
<!-- Close video popup-->
JS:
//Video popup
$(document).ready(function() {
$('.video-trigger').click(function() {
$('.video-overlay').fadeIn(300);
$('.video-overlay video').get(0).play();
});
$('.video-overlay .overlay-close').click(function() {
$('.video-overlay').fadeOut(300);
$('.video-overlay video').get(0).pause();
});
});
This is how it is laid out in my actual web document:
<div class="col span_6_of_12 ripple-me">
<div class="video-thumbnail" style="background-image: url(<?php echo $video_thumbnail; ?>);">
<span class="video-trigger">
</span>
</div>
<!--Close Video box cta -->
<div class="video-overlay">
<div class="overlay-close">Close</div>
<div class="container">
<iframe allowFullScreen='allowFullScreen' src="<?php echo $video_link; ?>" width="960" height="370" allowtransparency="true" style='position:absolute;top:0;left:0;width:100%;height:100%;' frameborder="0"></iframe>
</div>
</div>
<!-- Close video popup-->
</div>

The issue with your current logic is that it's affecting all .video-overlay elements on click. To fix this you can use DOM traversal to find only the one related to the clicked .video-trigger using next() and closest(). Try this:
$(document).ready(function() {
$('.video-trigger').click(function() {
$(this).next('.video-overlay').fadeIn(300).find('video').get(0).play();
});
$('.video-overlay .overlay-close').click(function() {
$(this).closest('.video-overlay').fadeOut(300).find('video').get(0).pause();
});
});

Try using JQuery Next Function :
//Video popup
$(document).ready(function() {
$('.video-trigger').click(function() {
var $videoOverlay = $(this).next('.video-overlay');
videoOverlay.fadeIn(300);
videoOverlay.find('video').get(0).play();
});
});

jQuery provides powerful DOM traversal tools. Be sure to use them
//Video popup
$(document).ready(function() {
$('.video-trigger').click(function() {
$(this).parent().next('.video-overlay').fadeIn(300);
$('.video-overlay video').get(0).play();
});
$('.video-overlay .overlay-close').click(function() {
$(this).parent().fadeOut(300);
$('.video-overlay video').get(0).pause();
});
});

JQuery onclick function error within post loop

I have a loop of posts in wordpress and I am trying to call a jquery on click show event which will show a contact form for that post when clicked.
The onclick show works only for the first post in the loop where it will display the contact form for that post no problem - but, it does not work for any of the other posts in the loop. Anyone know why this may be? The page with the post loop is https://www.salusa.co.uk/specialist-training-courses/.
The code is roughly:
<div class="archive-posts-loop">
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$(".show-form").click(function () {
$("#contact-form-wrapper").show("fast");
});
$("#close").click(function () {
$("#contact-form-wrapper").hide("fast");
});
});
</script>
</div><!--post-->
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$(".show-form").click(function () {
$("#contact-form-wrapper").show("fast");
});
$("#close").click(function () {
$("#contact-form-wrapper").hide("fast");
});
});
</script>
</div><!--post-->
</div><!--archive-post-loop-->

As you have a new form for each post you need to target the correct form for the post. You can listen for delegated click events and show/hide the nested form accordingly. Note that you do not need (nor should have) the script repeated for each form as shown in your example.
$(function(){
$(".post")
.on("click", ".show-form", function() {
$(this).parents(".post").find(".contact-form-wrapper").show("fast");
})
.on("click", ".close", function() {
$(this).parent().hide("fast");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
[Form here] close
</div>
</div>
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
[Form here] close
</div>
</div>
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
[Form here] close
</div>
</div>

You are using multiple elements with the same id of contact-form-wrapper. Instead you need to make each element have a unique id, and then select that id in the respective jquery calls. Jquery will return the first matching element given a selector, which is why it only selects the first post each time.

Here is a codepen that does what you want.
https://codepen.io/abidhasan/pen/wpdoyO?editors=1111
This is the jQuery that you can use - basically look for the sibling and change its style
$(".post .show-form").on("click", function() {
$(this).parent().siblings()[0].style.display= "block";
});
$(".post .hide-form").on("click", function() {
$(this).parent().siblings()[0].style.display= "none";
});

span click add display and hide divs [duplicate]

This question already has answers here:
ReferenceError: Can't find variable: $
(4 answers)
Closed 6 years ago.
I have a span which acts like a button to display divs depending on what span you click. Each span has its on div containing its content which is displayed none when onload. The problem is that the span when click doesn't do anything. It should be displaying its content.
HTML
<p class="lead"><span class="productbtn btn1">FRESH</span><span class="productbtn btn2">CHILLED</span><span class="productbtn btn3">FROZEN</span><span class="productbtn btn4">DRY</span></p>
<div class="section-1" style="display:none">
ASDQWEXZC
</div>
<div class="section-2" style="display:none">
1234567896
</div>
<div class="section-3" style="display:none">
1234567896
</div>
<div class="section-4" style="display:none">
1234567896
</div><p class="lead"><span class="productbtn btn1">FRESH</span><span class="productbtn btn2">CHILLED</span><span class="productbtn btn3">FROZEN</span><span class="productbtn btn4">DRY</span></p>
<div class="section-1" style="display:none">
ASDQWEXZC
</div>
<div class="section-2" style="display:none">
1234567896
</div>
<div class="section-3" style="display:none">
1234567896
</div>
<div class="section-4" style="display:none">
1234567896
</div>
CSS
.productbtn:hover, productbtn:active {
background: #bdc3c7;
color: #fff;
}
.productbtn {
padding: 20px;
background: #ecf0f1;
margin: 10px;
width: 250px;
display: inline-block;
cursor: pointer;
transition: .3s ease all;
}
SCRIPT
$(function(){
$(".btn1").click(function(){
$(".section-1").css("display","block");
$(".section-2, .section-3, .section-4").css("display","none");
});
$(".btn2").click(function(){
$(".section-2").css("display","block");
$(".section-1, .section-3, .section-4").css("display","none");
});
$(".btn3").click(function(){
$(".section-3").css("display","block");
$(".section-2, .section-1, .section-4").css("display","none");
});
$(".btn4").click(function(){
$(".section-4").css("display","block");
$(".section-2, .section-3, .section-1").css("display","none");
});
});
FIDDLE HERE
other Javascript or jquery solutions are acceptable.
FIDDLE HERE
For active status resolve the previous issues above.
SCRIPT ACTIVE STATUS:
$(function(){
$(".btn-click").click(function(){
var active = $(this).addClass("active")
var target = $(this).data("action");
$("."+target).show().siblings("div[class*=section-]").hide();
})
});

Your code wasn't working because you didn't include jQuery. Try adding that in fiddle it will work.
But why to write that long code when you can do it smartly with a much shorter code:
Here is the jQuery:
$(function(){
$(".btn-click").click(function(){
var target = $(this).data("action");
$("."+target).show().siblings("div[class*=section-]").hide();
})
});
Yea that's it, but, if the HTML is like:
<p class="lead"><span class="productbtn btn1 btn-click" data-action="section-1">FRESH</span><span class="productbtn btn2 btn-click" data-action="section-2">CHILLED</span><span class="productbtn btn3 btn-click" data-action="section-3">FROZEN</span><span class="productbtn btn4 btn-click" data-action="section-4">DRY</span></p>
<div class="section-1" style="display:none">
ASDQWEXZC
</div>
<div class="section-2" style="display:none">
1234567896
</div>
<div class="section-3" style="display:none">
1234567896
</div>
<div class="section-4" style="display:none">
1234567896
</div>

Doesn't look like you included jQuery
I added it in the external resources section on the left hand, and now it works https://jsfiddle.net/aLkd4545/1/
Here's how to include it in your code(html):
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>