I'm using Jquery selector.
I have two addDDetails.
When we click on addDDetails, system will highlight pink on second addDDetails ( which I remark [ I want select This!!! ])
I noticed that I click on first addDDetails, system highlight pink wrongly at first addDetails.
How can I click on first addDDetails, system highlight pink on second addDDetails?
Thanks.
$(".addDDetails").click(function () {
$(this).closest(".Details > div").find(".addDDetails").css("background", "pink")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="row Details" style="border-style:solid;">
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 textfield">
<span class="icon icon--plus addDDetails">+</span>
</div>
<div class="col-lg-11 col-md-11 col-xs-11 col-sm-11 textfield">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 textfield">
<span class="icon icon--plus addDDetails">+ [ I want select This!!! ]</span>
</div>
<div class="col-lg-11 col-md-11 col-xs-11 col-sm-11 textfield">
</div>
</div>
</div>
</div>
You can use eq() to find the specified index element and bind the corresponding event handler.
Or you can use .index() in class selector to judge the current element index and make corresponding logic.
If the elements are siblings, you could do this:
var index = $(this).index();
If not, you can pass a selector of the set in which to look for the element.
var index = $(this).index('your selector');
e. g.
const _selector = '.addDDetails';
const _cssName = 'background-color';
$(_selector).click(function() {
const index = $(this).index(_selector);
$(_selector).css(_cssName, 'red');
if (index == 0) {
$(this).eq(index).css(_cssName, '');
} else {
$(_selector).css(_cssName, '');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="row Details" style="border-style:solid;">
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 textfield">
<span class="icon icon--plus addDDetails">+</span>
</div>
<div class="col-lg-11 col-md-11 col-xs-11 col-sm-11 textfield">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 textfield">
<span class="icon icon--plus addDDetails">+ [ I want select This!!! ]</span>
</div>
<div class="col-lg-11 col-md-11 col-xs-11 col-sm-11 textfield">
</div>
</div>
</div>
</div>
Here the answer use
.children('div').eq(1)
$(".addDDetails").click(function () {
$(this).closest(".Details").children('div').eq(1).find('.addDDetails').length == 1).css("background", "pink");
});
Thanks.
Related
I need to wrap all divs after each h4 tag so then i can modify the column size depending on the results.
As is:
<div class="bannerPrincipales">
<h4 class="col-md-12 hotels-area punta-cana">Punta Cana</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<h4 class="col-md-12 hotels-area bayahibe">Bayahibe</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<h4 class="col-md-12 hotels-area riviera-maya">Riviera Maya</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>
To be:
<div class="bannerPrincipales">
<h4 class="col-md-12 hotels-area punta-cana">Punta Cana</h4>
<div class="description-wrap">
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>
<h4 class="col-md-12 hotels-area bayahibe">Bayahibe</h4>
<div class="description-wrap">
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>
<h4 class="col-md-12 hotels-area riviera-maya">Riviera Maya</h4>
<div class="description-wrap">
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>
</div>
What I tried:
$(" h4.hotels-area").each(function(){
$(this).nextAll().wrapAll('<div class="description-wrap"></div>')
});
When I do this it messed up my HTML. I do not have access to the html so i need to do it this way, once i wrap then i will count how many div are into the description-wrap class, but I can't get to wrap.
I thought on wrapping because what i need is to be able to count how many col-md-6 col-sm-12 col-xs-12 padding-banner-left are after each h4 and if the result is an unpaired number the first col-md-6 col-sm-12 col-xs-12 padding-banner-left i will change the cols to col-md-12 without knowing how col-md-6 col-sm-12 col-xs-12 padding-banner-left i have after each h4 i won't be able to achive my goal
You could add a div.description-wrap after each h4 tag inside .bannerPrincipales (with the jQuery.after function).
Then, you could cycle each div inside .bannerPrincipales, and say:
if it has description-wrap class, then it will be the wrapper;
else append it inside wrapper (with the jQuery.append function).
And, finally, you could count the number of divs inside wrapper with the length property.
$(function () {
$('.bannerPrincipales h4').after('<div class="description-wrap"></div>');
let wrapper = null;
$('.bannerPrincipales div').each((i, div) => {
if ($(div).hasClass('description-wrap')) {
wrapper = div;
} else {
$(wrapper).append(div);
}
});
$('.bannerPrincipales .description-wrap').each((i, wrapper) => {
let place = $('.bannerPrincipales h4:eq(' + i + ')').text();
let n = $(wrapper).find('div').length;
console.log(place + ' has ' + n + ' divs');
});
});
.description-wrap {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bannerPrincipales">
<h4 class="col-md-12 hotels-area punta-cana">Punta Cana</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">a</div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">b</div>
<h4 class="col-md-12 hotels-area bayahibe">Bayahibe</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">c</div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">d</div>
<h4 class="col-md-12 hotels-area riviera-maya">Riviera Maya</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">e</div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">f</div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">g</div>
</div>
I am trying to make the data that this function generates appear in my CSV file. However, when it creates the CSV file there is no data and it's a blank csv document. Any suggestions?
const fs = require('fs');
const csv = await page.$$eval('.product_desc_txt', function(products){
// Iterate over product descriptions
let csvLines = products.map(function(product){
// Inside of each product find product SKU and its price
let productId = product.querySelector("div.product_desc_txt > div.body-copy.custom-body-copy").innerText.trim();
let productPrice = product.querySelector("span[data-wishlist-linkfee]").innerText.trim();
// Format them as a csv line
return `${productId};${productPrice}`;
});
// Join all lines into one file
return csvLines.join("\n");
});
fs.writeFileSync("test.csv", csv);
});
This is the code from the source, it basically repeats itself over and over with different item numbers and prices. I just need the item number and price. looped over.
<div class="list-tbl">
<div class="row" data-body-header>
<div class="col-xs-12">
<div class="split-line split-line-header-gap">
<div class="row">
<div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-xs-2 body-copy">
<div class="style-check">
<input type="checkbox" id = "selectall" name="selectall" value="279114616" class="selectall">
<label for="selectall">
<span>All</span>
</label>
</div>
</div>
<div class="col-xl-1 col-lg-1 col-md-2 col-sm-3 col-xs-4 body-copy"></div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-xs-6 body-copy">
<span class="hidden visible-lg visible-xl">Item</span>
</div>
<div class="col-xl-2 col-lg-2 text-right body-copy hidden visible-xl">
Price
</div>
<div class="col-xl-1 body-copy hidden visible-xl"></div>
<div class="col-xl-1 col-lg-1 col-md-2 body-copy hidden visible-xl visible-lg">
Quantity
</div>
<div class="col-xl-3 col-lg-4 col-md-4 body-copy hidden visible-xl visible-lg visible-md"></div>
</div>
</div>
</div>
</div>
<input type="hidden" id="isBDAppVar" value="BD" />
<input type="hidden" class="orderItem-2000423036" value="237459854"/>
<div class="row item-row" id = "2000423036" data-body-row>
<div class="col-xs-12">
<div class="split-line split-line-gap">
<div class="row">
<div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-xs-2">
<div class="style-check marg_chk">
<input type="checkbox" class="checkbox" name="select" id ="select_0" value="0">
<label for="select_0">
<span class="hide">
Select
Item
</span>
</label>
</div>
</div>
<div class="col-xl-1 col-lg-1 col-md-2 col-sm-3 col-xs-4">
<div class="product-img-holder">
<img class="img-responsive prod-image-coming-soon" title="Pringles Snack Pack Potato Crisps, Original, 0.67 oz, 60 ct"
src="https://images.costcobusinessdelivery.com/ImageDelivery/imageService?profileId=12028466&imageId=1055688__1&recipeName=350"
onerror="this.onerror='';this.src='/wcsstore/CostcoGLOBALSAS/images/prod-image-coming-soon.svg';this.alt='Product Image Coming Soon'"
alt="Shoping List Product Image" />
</div>
</div>
<!-- price + linkfee based on region -->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-8 col-xs-6">
<div class="product_desc_txt">
<a href=" https://www.costcobusinessdelivery.com/.product.1055688.html " class="body-copy-link">
Pringles Snack Pack Potato Crisps, Original, 0.67 oz, 60 ct
</a>
<div class="body-copy custom-body-copy">
Item 1055688
</div>
<div class="margin_tp_10"></div>
<div class="body-copy hidden visible-md visible-sm visible-xs visible-lg">
<span data-wishlist-linkfee="false" > $15.89</span>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-2 body-copy text-right hidden visible-xl ">
<span data-wishlist-linkfee="false" > $15.89</span>
</div>
I am developing a web page which has multiple drop down menu. Now i need to display some text area according to the options selected in the drop down. If it is a normal drop down i can do that easily. But here the problem is need to display multiple text areas on multiple selection of that drop down.
Here is my code
<div class="row form-group">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
<spring:message text="Nature of Type" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<select id="nature" type="text" class="form-control"
multiple="multiple" onchange="ChangeNature(this)">
<option>Airticket(Round Trip)</option>
<option value="visa">Visa</option>
<option value="medical">Medical</option>
<option value="resident">Resident Card</option>
<option value="pickupdrop">Airport Pickup/Drop</option>
<option value="accommodation">First 7 Days Free
Accommodation</option>
<option value="other1">Other 1</option>
<option value="other2">Other 2</option>
</select> <span class="errorspan" id="nature_er">select the
type</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"
id="airticket_amt">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Airticket Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter
airticket the Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="visa_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Visa Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter the
visa amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="medical_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Medical Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter the
medical amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="residentcard_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Resident Card Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter the
resident card Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="pickupdrop_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Airport Pickup/Drop Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter the
pickup/drop Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="accommodation_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Free Accommodation Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls" />
<span class="errorspan" id="billinghrs_er">enter the
free accommodation Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="other1_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Other1 Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls" />
<span class="errorspan" id="billinghrs_er">enter the
other1 Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="other2_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Other2 Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls" />
<span class="errorspan" id="billinghrs_er">enter the
other2 Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
and here is my script
function ChangeNature(obj) {
var selectValue = obj;
var selected = selectValue.options[selectValue.selectedIndex].value;
/* var visa = document.getElementsByClassName("multihide");
var medical = document.getElementById("medical_amt");
var resident = document.getElementById("residentcard_amt");
var pickupdrop = document.getElementById("pickupdrop_amt");
var acc= document.getElementById("accommodation_amt");
var other1 = document.getElementById("other1_amt");
var other2 = document.getElementById("other2_amt"); */
if(selected ==="visa"){
$("#visa_amt").show();
}
if(selected ==="medical"){
$("#visa_amt").hide();
$("#medical_amt").show();
}
if(selected ==="resident"){
$("#medical_amt").hide();
$("#residentcard_amt").show();
}
if(selected ==="pickupdrop"){
$("#residentcard_amt").hide();
$("#pickupdrop_amt").show();
}
if(selected ==="accommodation"){
$("#pickupdrop_amt").hide();
$("#accommodation_amt").show();
}
else{
$("#accommodation_amt").hide();
}
}
Use a second function.
The first one will be triggered ever time you change the selection of the checkbox. It will change the class of the trigger source (the current active element) and add or remove a class (e.g. selected). After this you start a second function named updateTextAreas.
Inside this Function you get all you elements with the given class (e.g. selected) and walk over the result list. Then you could show the needed text areas and hide all others.
function ChangeNature(obj) {
$(obj).toggleClass('selected');
updateTextAreas();
}
function updateTextAreas(){
// hide everything
$("#visa_amt").hide();
$("#medical_amt").hide();
// get all selected options
$('.selected').each(function(i,e){
if($(e).hasClass("visa")){
$("#visa_amt").show();
}else if($(e).hasClass("medical")){
$("#medical_amt").show();
} [and so on]
});
}
Hope I understand you right.
The problem got solved now. I used the following script.
$('#nature').on('change',function(){
var val = $('#nature').val();
if(val!=null){
arr = val.toString().split(",");
$('.multihide').hide();
for(var i=0;i<arr.length;i++){
if(arr[i]=="airticket"){$("#airticket_amt").show();}
if(arr[i]=="visa"){$("#visa_amt").show();}
if(arr[i]=="medical"){$("#medical_amt").show();}
if(arr[i]=="resident"){$("#residentcard_amt").show();}
if(arr[i]=="pickupdrop"){$("#pickupdrop_amt").show();}
if(arr[i]=="accommodation"){$("#accommodation_amt").show();}
if(arr[i]=="other1"){$("#other1_amt").show();}
if(arr[i]=="other2"){$("#other2_amt").show();}
}
}else{
$('.multihide').hide();
}
});
Thanks to all.
I am currently working on an application where the user gets a list a bunch of divs with details on them, there are also hidden details in each div that can be toggled by the user. The issue is that when you click on "details" for one box it toggles the class on all boxes rather than just within the one that was clicked. I was looking for an answer to this issue and have come up with trying to auto-increment the ID's/Class so that each box that is created will have a unique identifier. I need to make it so that the "extra-details" is only opened in relation to the card "details" is clicked on. Thank you in advance for any help.
My Code
$(".card-details").on("click", function (e) {
e.preventDefault();
$(".extra-details").toggleClass("hidden");
});
h4 {
padding:10px 0 0 5px;
font-size:18px;
font-weight:bold;
}
.card {
border:none;
box-shadow:2px 2px 5px rgba(201,201,201, .5);
padding:5px;
margin:5px;
max-width:350px;
background:transparent;
border:1px solid #efefef;
font-size:12px;
}
hr {
border:1px solid #efefef;
width:100%;
margin-top:0;
}
.card-head {
color:#005ABB;
}
.card-container{
margin-top:20px;
margin-left:5px;
}
.card-info {
margin-left:20px;
background:transparent !important;
}
.card-details {
color:#005ABB;
margin-left:85%;
}
.card-details:hover {
text-decoration:underline;
color:#F9A51B;
cursor:pointer;
}
.hidden{
display:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="container">
<div class="row card-container">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
</div>
</div>
</div>
$(this).siblings('.extra-details').toggleClass('hidden') will achieve what you want.
Also note, your 'details' element is not actually a link, only styled like one, so you don't need the e.preventDefault() line.
Try:
$(".card-details").on("click", function (e) {
e.preventDefault();
$(this).siblings(".extra-details").toggleClass("hidden");
});
This works for me.
I just changed the javascript code as shown below.
$(".card-details").click(function() {
$(this).closest(".card").find(".extra-details").toggleClass("hidden");
});
h4 {
padding:10px 0 0 5px;
font-size:18px;
font-weight:bold;
}
.card {
border:none;
box-shadow:2px 2px 5px rgba(201,201,201, .5);
padding:5px;
margin:5px;
max-width:350px;
background:transparent;
border:1px solid #efefef;
font-size:12px;
}
hr {
border:1px solid #efefef;
width:100%;
margin-top:0;
}
.card-head {
color:#005ABB;
}
.card-container{
margin-top:20px;
margin-left:5px;
}
.card-info {
margin-left:20px;
background:transparent !important;
}
.card-details {
color:#005ABB;
margin-left:85%;
}
.card-details:hover {
text-decoration:underline;
color:#F9A51B;
cursor:pointer;
}
.hidden{
display:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="container">
<div class="row card-container">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
</div>
</div>
</div>
First all i'm new on jQuery so my question is not relevant please forgive me.
I have some div elements in my Dom and i'm trying to make a book shelf for my products. I followed this fiddle and that works perfectly. But my products are coming from MySQL and i'm parsing them with foreach loop in PHP.
My HTML Looks like:
<div class="product-yarn col-xs-4 col-md-2">
</div>
<div class="product-yarn col-xs-4 col-md-2">
</div>
<div class="product-yarn col-xs-4 col-md-2">
</div>
<div class="product-yarn col-xs-4 col-md-2">
</div>
<div class="product-yarn col-xs-4 col-md-2">
</div>
<div class="product-yarn col-xs-4 col-md-2">
</div>
Question: How can i add new <div> element after each 3 <div> like;
<div class="col-xs-12 shelf hidden-md hidden-lg"></div>
And add new <div> element after each 6 <div> like;
<div class="col-xs-12 shelf"></div>
Shortly, desired HTML output;
<div class="product-yarn col-xs-4 col-md-2">
</div>
<div class="product-yarn col-xs-4 col-md-2">
</div>
<div class="product-yarn col-xs-4 col-md-2">
</div>
<!-- Here Is The After 3rd div -->
<div class="col-xs-12 shelf hidden-md hidden-lg"></div>
<!-- Here Is The After 3rd div -->
<div class="product-yarn col-xs-4 col-md-2">
</div>
<div class="product-yarn col-xs-4 col-md-2">
</div>
<div class="product-yarn col-xs-4 col-md-2">
</div>
<!-- Here Is The After 6th div -->
<div class="col-xs-12 shelf"></div>
<!-- Here Is The After 6th div -->
I looked at some questions in SO some of them about wrapping every 3 element with new element. But i want to add new element.
So, Is it possible to make it with jQuery?
Thanks in advance.
PS: Sorry for my bad English.
You need to use .after() in conjunction with :nth-child() Selector
.after()
Insert content, specified by the parameter, after each element in the set of matched elements.
:nth-child()
Selects all elements that are the nth-child of their parent.
Script
$(document).ready(function () {
$(".product-yarn:nth-child(3n)").after('<div class="col-xs-12 shelf hidden-md hidden-lg">after 3th div</div>');
$(".shelf:odd").removeClass('hidden-md hidden-lg');
});
DEMO
$(document).ready(function() {
$(".product-yarn:nth-child(3n)").after('<div class="col-xs-12 shelf hidden-md hidden-lg">after 3th div</div>');
$(".shelf:odd").removeClass('hidden-md');
$(".shelf:odd").removeClass('hidden-lg');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-4 col-md-2 product-yarn"> 1
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 2
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 3
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 4
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 5
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 6
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 1
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 2
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 3
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 4
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 5
</div>
<div class="col-xs-4 col-md-2 product-yarn"> 6
</div>
UPDATED :-
The jquery code you would need is
$(document).ready(function () {
$(".col-md-2").each(function (index, value) {
if ((index + 1) % 3 == 0) {
$(this).after('<div class="col-xs-12 shelf hidden-md hidden-lg">after 3rd div</div>');
}
if ((index + 1) % 6 == 0) {
$(this).after('<div class="col-xs-12 shelf">after 6th div</div>');
}
});
});
You can also check the working demo here - http://jsfiddle.net/esrab6dd/1/
(text is added within links for demo purpose , you can have it removed)
try :
$('div.col-xs-4').each(function (i, v) {
var index = parseInt($(this).index());
if ((i % 3 == 0) && (i % 6 != 0)) {
$('<div class="col-xs-12 shelf hidden-md hidden-lg"></div>').insertBefore($(this));
} else if (i / 6 != 0 && i % 6 == 0) {
$('<div class="col-xs-12 shelf"></div>').insertBefore($(this));
}
});
$('<div class="col-xs-12 shelf"></div>').insertAfter('div.col-xs-4:last');
http://www.bootply.com/GITjvbYqiq
Try this:
$(document).ready(function(){
total_elements = $(".col-xs-4.col-md-2").length;
var append_div = '<div class="col-xs-12 shelf hidden-md hidden-lg"> </div>';
for (var i=3; i<total_elements; i+3){
$(".col-xs-4.col-md-2").eq(i).append(append_div);
}
});