I have a group of spans in a div that I'm try to match and move to a corresponding id.
Each span has a data attribute that matches the parent ID of the target. I'm trying to use jQuery to match the data attributes in the spans and then append them before a separate span in the parent div ID's.
Here's my code:
HTML
<div id="id-expand-2">
<a class="thing" href="#">
<div class="item-title">
<span>Title 1</span>
</div>
</a>
</div>
<div id="id-expand-4">
<a class="thing" href="#">
<div class="item-title">
<span>Title 2</span>
</div>
</a>
</div>
<div id="id-expand-6">
<a class="thing" href="#">
<div class="item-title">
<span>Title 3</span>
</div>
</a>
</div>
<div class="vid-imgs">
<span class="item" data-item="id-expand-2"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span class="item" data-item="id-expand-4"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span class="item" data-item="id-expand-6"><img src="https://www.fillmurray.com/g/140/100" /></span>
</div>
Basically, each span that is in the vid-imgs class with the data-item would match to the ID of the parent divs and then do an .append() right after the item-title class.
So the intended output would be something like this:
<div id="id-expand-2">
<a class="thing" href="#">
<div class="item-title">
<span class="item" data-item="id-expand-2"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span>Title 1</span>
</div>
</a>
</div>
<div id="id-expand-4">
<a class="thing" href="#">
<div class="item-title">
<span class="item" data-item="id-expand-4"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span>Title 2</span>
</div>
</a>
</div>
<div id="id-expand-6">
<a class="thing" href="#">
<div class="item-title">
<span class="item" data-item="id-expand-6"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span>Title 3</span>
</div>
</a>
</div>
I'm not sure how to match each of those overall.
I was thinking of using each like this:
$(".vid-imgs").each(function () {
var items = $(".item").attr("data-item");
console.log(items);
});
But that only seems to grab the first item in the vid-imgs div. I feel like I've done this before, but I've been starting at this thing all day, and I think I need to give my eyes a break.
Few things:
$(".item").attr("data-item"); is getting the value of the data-item attribute of the .item. If you want to select the item with a specific id, you can use the CSS id selector
You should be looping through the spans inside .vid-imgs, not .vid-imgs itself
$(".vid-imgs span").each(function () {
var items = $("div#"+$(this).data('item'))
items.append(this.cloneNode(true))
this.remove() //remove the span
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="id-expand-2">
<a class="thing" href="#">
<div class="item-title">
<span>Title 1</span>
</div>
</a>
</div>
<div id="id-expand-4">
<a class="thing" href="#">
<div class="item-title">
<span>Title 2</span>
</div>
</a>
</div>
<div id="id-expand-6">
<a class="thing" href="#">
<div class="item-title">
<span>Title 3</span>
</div>
</a>
</div>
<div class="vid-imgs">
<span class="item" data-item="id-expand-2"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span class="item" data-item="id-expand-4"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span class="item" data-item="id-expand-6"><img src="https://www.fillmurray.com/g/140/100" /></span>
</div>
Related
I am working on one of the requirement, where I have to show div based on user input. Below is the code structure.
<input id="location-filter" type="text">
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title"></h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>London</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title"></h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>Canada</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
There are two 'item' divs, the difference is only 'item-location' div, containing p tag of location names. If user enters 'London', I want to show all 'item' divs which contain text 'london' and hide other 'item' divs. I tried the below code, but no luck. Any help would be appreciated. Thank you.
$("#location-filter").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
// Loop through the div
$('.item > .item-location p').each(function() {
// If the list item does not contain the text phrase fade it out
if ($("this").text().search(new RegExp(filter, "i")) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
});
I think the problem is with your CSS selector in the Jquery.
$('.item .item-location p')
should be right. This is because with the arrow, it is looking for an element with "item-location" directly under an element with the class "item" which it is not able to find.
Your code had some mistakes. The > is used to select the direct child. .item has no .item-location element as direct child. That is why, each iterator wasn't running at all. Besides that, the this in the if condition is wrapped inside double quotes, making it a string. And the last mistake was that, in the each loop, this refers to the element being iterated. To hide or show the .item, you've to use closest to reach the ancestor .item
$("#location-filter").keyup(function() {
var filter = $(this).val(),
count = 0;
$('.item .item-location p').each(function() {
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).closest('.item').hide();
} else {
$(this).closest('.item').show();
count++;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="location-filter" type="text">
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title">
</h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>London</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title">
</h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>Canada</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
I'm new to this section. I'm using a wordpress homepage and use wpbakery for creating my content.
My specific problem is that I have an accordion but cannot open it automatically.
That's what I did: created an accordion with different tabs. I wanna use a link like test.com\accordion#tab2 open the side and automatically the right tab2 of the accordion. Anyone know the code of JS I could use to solve this?
<div class="wpb_column vc_main_column vc_column_container vc_col-sm-12 typo-default">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="vc_tta-container" data-vc-action="collapse">
<div class="vc_general vc_tta vc_tta-tabs vc_tta-color-grey vc_tta-style-classic vc_tta-shape-rounded vc_tta-spacing-1 vc_tta-tabs-position-top vc_tta-controls-align-left">
<div class="vc_tta-tabs-container">
<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab vc_active" data-vc-tab="">
<a href="#tabid1" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">Tab 1</span>
</a>
</li>
<li class="vc_tta-tab" data-vc-tab="">
<a href="#tabid2" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">Tab 2</span>
</a>
</li>
<li class="vc_tta-tab" data-vc-tab="">
<a href="#tabid3" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">Tab 3</span>
</a>
</li>
</ul>
</div>
<div class="vc_tta-panels-container">
<div class="vc_tta-panels">
<div class="vc_tta-panel vc_active" id="tabid1" data-vc-content=".vc_tta-panel-body">
<div class="vc_tta-panel-heading">
<h4 class="vc_tta-panel-title">
<a href="#tabid1" data-vc-accordion="" data-vc-container=".vc_tta-container">
<span class="vc_tta-title-text">Tab 1</span>
</a>
</h4>
</div>
<div class="vc_tta-panel-body" style="">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>text1</p>
</div>
</div>
</div>
</div>
<div class="vc_tta-panel" id="tabid2" data-vc-content=".vc_tta-panel-body">
<div class="vc_tta-panel-heading">
<h4 class="vc_tta-panel-title">
<a href="#tabid2" data-vc-accordion="" data-vc-container=".vc_tta-container">
<span class="vc_tta-title-text">Tab 2</span>
</a>
</h4>
</div>
<div class="vc_tta-panel-body" style="">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>text2</p>
</div>
</div>
</div>
</div>
<div class="vc_tta-panel" id="tabid3" data-vc-content=".vc_tta-panel-body">
<div class="vc_tta-panel-heading">
<h4 class="vc_tta-panel-title">
<a href="#tabid3" data-vc-accordion="" data-vc-container=".vc_tta-container">
<span class="vc_tta-title-text">Tab 3</span>
</a>
</h4>
</div>
<div class="vc_tta-panel-body" style="height: 0px;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>text3</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have creating a dynamic div using jQuery. That div will wrapping two elements 1. is <span> 2. is <a> the code be like below:-
$("div").delegate(".dateEdit", "click", function(e){
e.preventDefault();
alert(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class= "specific">
<span id= "0">some data of 1</span>
<a class="dateEdit" id="0" href="#" data-toggle="modal" data-target="#thirdModal">
button
</a>
</div>
</div>
<div class="content">
<div class= "specific">
<span id= "1">some data of 2</span>
<a class="dateEdit" id="1" href="#" data-toggle="modal" data-target="#thirdModal">
button
</a>
</div>
</div>
<div class="content">
<div class= "specific">
<span id= "3">some data</span>
<a class="dateEdit" id="3" href="#" data-toggle="modal" data-target="#thirdModal">
button
</a>
</div>
</div>
How will I take the text of the particular span by clicking its anchor tag and how will show the alert box only once time using this div without using $('.specific'). Thank you.
You can try $(this).prev('span').
Please note: The on() syntax is the new syntax as of jQuery 1.7 and it was meant to substitute bind(), delegate() and live().
$("body").on("click", ".dateEdit", function(e){
//e.preventDefault();
alert($(this).prev('span').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class= "specific">
<span id= "0">some data of 1</span>
<a class="dateEdit" id="0" href="#" data-toggle="modal" data-target="#thirdModal">
button
</a>
</div>
</div>
<div class="content">
<div class= "specific">
<span id= "1">some data of 2</span>
<a class="dateEdit" id="1" href="#" data-toggle="modal" data-target="#thirdModal">
button
</a>
</div>
</div>
<div class="content">
<div class= "specific">
<span id= "3">some data</span>
<a class="dateEdit" id="3" href="#" data-toggle="modal" data-target="#thirdModal">
button
</a>
</div>
</div>
Get the closest div and find the span in that div and get the text of that span.
$("div .dateEdit").click(function(e){
var spanData = $(this).closest('.specific').find('span').text();
console.log(spanData);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class= "specific">
<span id= "0">some data of 1</span>
<a class="dateEdit" id="0" href="#" data-toggle="modal" data-target="#thirdModal">
button
</a>
</div>
</div>
<div class="content">
<div class= "specific">
<span id= "1">some data of 2</span>
<a class="dateEdit" id="1" href="#" data-toggle="modal" data-target="#thirdModal">
button
</a>
</div>
</div>
<div class="content">
<div class= "specific">
<span id= "3">some data</span>
<a class="dateEdit" id="3" href="#" data-toggle="modal" data-target="#thirdModal">
button
</a>
</div>
</div>
I tried many thigs to navigate to next div element I'm using Mousetrap for key listener and checking if there is selected item then I'm trying to find the next div but seems like can't find anything any ideas?
HTML (There are many of this div item):
<div class="item">
<a href="#">
<div class="item-flip">
<div class="item-inner">
<img src="#">
</div>
<div class="item-details">
<div class="item-details-inner">
<div class="down-details">
<div class="rating" data-content="9.5">
<i class="icon icon-star"></i>9.5
</div>
<span class="year">2011</span>
<span>Go</span>
</div>
</div>
</div>
</div>
</a>
</div>
Javascript
Mousetrap.bind("right", function() {
if($('.item-flip selected').length){
var current = $('.item-flip selected');
$('.selected').removeClass('selected');
var el = current.next();
el.addClass('selected');
}
else{
$('.item-flip').first().addClass('selected')
}
});
I tried how to figure out a solution, in the following my snippet the code.
The points of interest are:
To select an element with two classes you need to change from $('.item-flip selected') to $('.item-flip.selected')
To get next element you need to find the clossest div father and then search for the item-flip div. So from var el = current.next(); you need to change to: var el = current.closest('.item').next().find('.item-flip');
$(function () {
Mousetrap.bind("right", function(e) {
if($('.item-flip.selected').length){
var current = $('.item-flip.selected');
$('.selected').removeClass('selected');
var el = current.closest('.item').next().find('.item-flip');
el.addClass('selected');
}
else{
$('.item-flip').first().addClass('selected')
}
});
});
.selected {
background-color: red;
}
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://rawgit.com/ccampbell/mousetrap/master/mousetrap.js"></script>
<div class="item">
<a href="#">
<div class="item-flip">
<div class="item-inner">
<img src="#">
</div>
<div class="item-details">
<div class="item-details-inner">
<div class="down-details">
<div class="rating" data-content="9.5">
<i class="icon icon-star"></i>9.5
</div>
<span class="year">2011</span>
<span>Go</span>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="item">
<a href="#">
<div class="item-flip">
<div class="item-inner">
<img src="#">
</div>
<div class="item-details">
<div class="item-details-inner">
<div class="down-details">
<div class="rating" data-content="9.5">
<i class="icon icon-star"></i>9.5
</div>
<span class="year">2011</span>
<span>Go</span>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="item">
<a href="#">
<div class="item-flip">
<div class="item-inner">
<img src="#">
</div>
<div class="item-details">
<div class="item-details-inner">
<div class="down-details">
<div class="rating" data-content="9.5">
<i class="icon icon-star"></i>9.5
</div>
<span class="year">2011</span>
<span>Go</span>
</div>
</div>
</div>
</div>
</a>
</div>
I have a product split into two sections: Image and Description. The image is linked using however the Description is not. since it is dynamic I am wondering how can I get this URL and using JS to assign it to the description box?
<div class="item__media">
<div class="item__image">
<a href="http://prototype.aaa.com" title="" class="product-image item__link">
<img src="http://a4.res.cloudinary.com//image/upload/c_pad,dpr_1.0,f_auto,h_221,q_80,w_303/damson_108170_1_2_2.jpg" alt="image">
</a>
</div>
<div class="item__detail">
<a href="http://prototype.aaa.com" title="Description" class="item__link">
<p class="product-name item__name">Product 15252</p>
</a>
</div> </div></div>
<div class="price-box">
<p class="old-price">
<span class="price-label">Was</span>
<span class="price" id="old-price-7139">
<span class="price"><span class="currency">£</span>179</span> </span>
</p>
<p class="special-price">
<span class="price-label">You Save</span>
<span class="price" id="price-excluding-tax-7139">
<span class="price"><span class="currency">£</span>90</span> </span>
</p>
</div>
<div class="price-range">
<span class="price-label" style="display: none;">From </span><span class="price-label">SHOP FROM</span>
<span class="price"><span class="price"><span class="currency">£</span>89</span></span>
</div>
</div>
</div>
Thanks N