I have an outter div .listingContainer, I have about 10 of these on the page all with different content in them. When I click the inner div .saveCompare I want to get the html off all the .listingContainer using jQuery var htmlStr = $(this).html();
I am finding it difficult getting the html of the clicked div, I tried .parent and such and it does not seem to work.
Would be grateful if someone point me to the correct dom call, thanks.
<div class="listingContainer grid_9 alpha omega">
<a class="listContent" href="adContent.html">
<div class="listingWrapper">
<div class="grid_8 alpha omega">
<div class="listingContent">
<div class="imgHolder">
<img src="imgs/cars/SearchThumb-10053319.jpg" width="100" height="75">
</div>
<div class="descHolder">
<div id="doneDeal"></div>
<h3>Fancy Car</h3><div class="saveCompare"><strong>+</strong> Compare</div>
<p>Lorem ipsum dolor sit amet, pri ex duis maiorum commune, illud viderer suscipiantur eam an. Dolorum recteque qui in. Pro inani nulla tacimates ex, qu</p>
<span class="listingPrice"><strong>€4,000</strong></span>
<span class="listingDate">Listed: <strong>Today</strong></span>
<span class="listingLocation">Co. Waterford</span>
<span class="listingViews">Viewed: 20 Times</span>
</div>
</div>
</div>
<div class="goTo goTo_unfocus grid_1 alpha omega">
<div class="gotoWrapper">
Click to View
<div class="imgVeiw"></div>
</div>
</div>
</div><!--End listingWrapper-->
</a>
</div>
To get the first parent that matches a specific selector, starting from an element going up, you can use .closest:
$(this).closest(".listingContainer");
This should accomplish what you are asking:
$(".saveCompare").click(function() {
alert($(this).closest(".listingContainer").html());
});
$(".saveCompare").click(function(ev){
var listEl = $(this).parents(".listingContainer").first();
//Do what ever you want with listEl. For example listEl.html() ..etc;
});
$(".saveCompare").parents(".listingContainer").get(0)
$('.saveCompare').click(function() {
$(this).parents('.listingContainer:first');
});
.listContent is an anchor tag and all the elements inside that. I'm not sure you will get "$('.saveCompare').click". Check this link
http://jsfiddle.net/Zh7HN/1/
Related
I created this card for design purpose but i want to create html card dynamically using JavaScript or jQuery, means if I pass 5 value in a loop then 5 cards create with same design. How can I do this?
<div class="scrolling-wrapper">
<div class="card">
<img id="card-shopping-cart-icon" src="images/cart.png" alt="">
<img id="card-wishlist-icon" src="images/heart.png" alt="">
<img id="card-image" src="images/motorola_one.jpg" alt="Motorola" class="contain">
<div class="card-text-body">
<p class="card-clock-deals-title">Motorola One Power</p>
<p class="card-clock-deals-detail">RAM 4/6GB ROM 64GB</p>
<p class="card-clock-deals-discounted-price">2000</p>
<p>
<table class="card-clock-deals-timer">
<tr>
<td id="hours">12</td>
<td>:</td>
<td id="minutes">00</td>
</tr>
</table>
</p>
<p class="card-clock-deals-original-price">3000</p>
<p class="card-clock-deals-timer-text">Hrs Left</p>
<p class="card-clock-deals-like-image"><img src="images/heart.png" alt="">(381)</p>
</div </div>
I created this card for design purpose but i want to create html card dynamically using JavaScript or jQuery, means if I pass 5 value in a loop then 5 cards create with same design. How can I do this?
So as I asked you, you're using a database to store the data from the cards right? So all you need is create the connection to the database, then fetch the result with a loop to display one by one the cards.
// Here you need to create your connection to the database with your values
<?php
include 'connection.php';
//Here write your SQL query to get the data from your cards database
$sql = "SELECT * FROM cards";
$result = $conn->query($sql);
?>
// Then we start with the html code to get the data and show the cards
<!doctype html>
<html>
<body>
<h1 align="center">CARDS</h1>
<?php
//Fetch Data form database
if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
?>
<div class="scrolling-wrapper">
<div class="card">
<img id="card-shopping-cart-icon" src="images/cart.png" alt="">
<img id="card-wishlist-icon" src="images/heart.png" alt="">
<img id="card-image" src="images/<?php echo $row['RowNameYouWannaGet']; ?>" alt="Motorola" class="contain">
<div class="card-text-body">
<p class="card-clock-deals-title"><?php echo $row['RowNameYouWannaGet']; ?></p>
<p class="card-clock-deals-detail"><?php echo $row['RowNameYouWannaGet']; ?></p>
<p class="card-clock-deals-discounted-price"><?php echo $row['RowNameYouWannaGet']; ?></p>
<p>
<table class="card-clock-deals-timer">
<tr>
<td id="hours"><?php echo $row['RowNameYouWannaGet']; ?></td>
<td>:</td>
<td id="minutes"><?php echo $row['RowNameYouWannaGet']; ?></td>
</tr>
</table>
</p>
<p class="card-clock-deals-original-price"><?php echo $row['RowNameYouWannaGet']; ?></p>
<p class="card-clock-deals-timer-text"><?php echo $row['RowNameYouWannaGet']; ?></p>
<p class="card-clock-deals-like-image"><img src="images/heart.png" alt=""><?php echo $row['RowNameYouWannaGet']; ?></p>
</div>
</div>
<?php
}
}
else
{ echo "No data found" } ?>
</body>
</html>
Hope it helps, you can also find info on Google searching--> Dynamic Tables PHP, MySQL
*ONLY FOR BOOTSTRAP 4 and above HTML CODE BELOW AND FIND "JAVASCRIPT FOR CARDS"
<div class="container row col-12 col-sm-12 justify-content-center" id="parsi">
<div class="card" style="width:18 rem;">
<img class="card-img-top"src="#" alt="">
<div class="card-body">
<h1>This is an card</h1>
<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Tempore, repudiandae neque? Placeat harum veniam omnis dolorum
necessitatibus vitae, nisi ducimus illum.</p>
<button type="button" class="btn btn-primary"
onclick="myclick()">Submit</button>
</div>
</div>
</div>
"JAVASCRIPT FOR CARDS" ==>
function myclick(){
var x= prompt("Enter number of cards u want to make","6");
if (x!=null){
var main=document.getElementById("parsi");
let num=parseInt(x);
var i;
const red="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore,
repudiandae neque? Placeat harum veniam omnis dolorum necessitatibus vitae,
nisi ducimus illum.";
var div=[];
for (i=0;i<num;i++){
div.push(document.createElement("div"));
div[i].setAttribute("class","card col-12 col-sm-3 ml-2 mt-3");
div[i].setAttribute("style","width:18 rem;");
const image=document.createElement("img");
image.setAttribute("class","card-img-top");
image.src="#";
div[i].appendChild(image);
var innerDiv=document.createElement("div");
innerDiv.setAttribute("class","card-body");
var h1=document.createElement("h1");
h1.textContent="This is the heading";
var p1=document.createElement("p1");
p1.setAttribute("class","card-text");
p1.textContent=red;
innerDiv.appendChild(h1);
innerDiv.appendChild(p1);
div[i].appendChild(innerDiv);
main.appendChild(div[i]);
}
}
}
I have created jsFiddle demo for this.
https://jsfiddle.net/wer4px80/2/
html:
<div id="scrolling-wrapper"></div>
javascript:
$(document).ready(function(){
var count = 5;
var html = "";
for(i=1;i<=count;i++)
{
html += "<div class='card'>card " + i +"</div>";
html += "<br>";
}
$("#scrolling-wrapper").html(html);
});
Please check if you need to generate more cards you can change the variable value and change html content as per your needs.
You should get dynamic data using ajax from your endpoint which provides you the data stored somewhere in your database you need to render on your page.
Also you can look into handlebars or mustache templating tools for better handling of dynamic content.
Links are given below:
https://mustache.github.io/
https://handlebarsjs.com/
I would like to find an element which is outside from element which I'm trying click.
I need to click #form-1 and slideToggle .business-form-kaufen.
You can look hierarchy in the picture.
Thanks for help!
You need to go up two DIV levels from the button, then go to the next DIV, and find .business-form-kaufen in there.
$(".button").click(function() {
$(this).parent().parent().next().find(".business-form-kaufen").slideToggle();
});
Use .parent() relatively
$("#form-1").on("click", function(evt) {
$(this).parent().parent().next().find(".business-form-kaufen").slideToggle();
});
.business-form-kaufen {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 text-left">
<div id="kaufen-form-submit">
<a id="form-1">Unverbindliches ...</a>
</div>
</div>
<div id="wpcf7-fp09-p448-ol">
<div class="screen-reader-response"></div>
<form>
<div class="business-form-kaufen">
Lorem ipsum dolor sit amet
</div>
</form>
</div>
Or if you can either edit your html to add some id to the .business-form-kaufen or be sure that it is only this single element of this class, you can do it much simpler:
$("#form-1").on("click", function(evt) {
$(".business-form-kaufen").slideToggle();
// $("#business-form-kaufen").slideToggle() uncomment if you can setup unique id on this element
});
.business-form-kaufen {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 text-left">
<div id="kaufen-form-submit">
<a id="form-1">Unverbindliches ...</a>
</div>
</div>
<div id="wpcf7-fp09-p448-ol">
<div class="screen-reader-response"></div>
<form>
<div class="business-form-kaufen">
Lorem ipsum dolor sit amet
</div>
</form>
</div>
I assume form and business-form-kaufen are 1 to 1 relationship? I'd put them together in a container and use parents() to find the container and then find() to look for the business-form-kaufen.
This way, the code is smart enough to look for the business-form-kaufen without the need to hard code the DOM structure.
This question already has answers here:
How to Select Element That Does Not have Specific Class
(6 answers)
Closed 6 years ago.
How can I write $(":not(selector)") in plain javascript?
jQuery:
var links = $('a:not(.not-lightbox-item a)', this);
HTML:
<div id="links">
<div class="not-lightbox-item">
<a href="projects.html" class="button-back">
<span class="glyphicon glyphicon-hand-left glyphicon-circle-arrow-leftx" title="Back"></span>
</a>
<h2 class="heading item-heading">(Title) Ways of Something</h2>
<p>Lorem ipsum dolor sit amet Excepteur sint occaecat cupidatat non proident</p>
</div>
<a href="images/banana.jpg" title="Banana">
<img src="images/thumbnails/banana.jpg" alt="Banana">
</a>
<a href="images/apple.jpg" title="Apple">
<img src="images/thumbnails/apple.jpg" alt="Apple">
</a>
<a href="images/orange.jpg" title="Orange">
<img src="images/thumbnails/orange.jpg" alt="Orange">
</a>
</div>
Any ideas?
use document.querySelector or document.querySelectorAll as the solution :
//returns first element matching
document.querySelector("a:not(.not-lightbox-item a)");
//returns all elements matching
document.querySelectorAll("a:not(.not-lightbox-item a)");
However #George Katsanos is right, it is clearer (and probably faster) to use a class like .lightbox-item than a double negation like a:not(.not-lightbox-item a)
Why not toggle a class which has the selector applied to it in in pure CSS?
.className {
color: blue;
}
var myitem = document.querySelector('.item')
myitem.classList.toggle('className');
I would resort to :not only if I had no control over the HTML.
I would like to make a slider dynamic. I am using Slider Pro.
Here my structure :
jQuery
$(".item-0").mouseover(function () {
$('#carousel').sliderPro('gotoSlide', 0);
});
$(".item-1").mouseover(function () {
$('#carousel').sliderPro('gotoSlide', 1);
});
$(".item-2").mouseover(function () {
$('#carousel').sliderPro('gotoSlide', 2);
});
$(".item-3").mouseover(function () {
$('#carousel').sliderPro('gotoSlide', 3);
});
HTML :
<div class="slider-pro" id="carousel">
<ol class="carousel-menu">
<a class="item-0" href="#carousel/0">
<li>Yatching</li>
</a>
<a class="item-1" href="#carousel/1">
<li>Aviation</li>
</a>
<a class="item-2" href="#carousel/2">
<li>Automobile</li>
</a>
<a class="item-3" href="#carousel/2">
<li>Watchmaking</li>
</a>
</ol>
<div class="sp-slides">
<!-- Slide 1 -->
<div class="sp-slide">
<img class="sp-image" src="path/to/image1.jpg" />
</div>
<!-- Slide 2 -->
<div class="sp-slide">
<p>Lorem ipsum dolor sit amet</p>
</div>
<!-- Slide 3 -->
<div class="sp-slide">
<h3 class="sp-layer">Lorem ipsum dolor sit amet</h3>
<p class="sp-layer">consectetur adipisicing elit</p>
</div>
<!-- Slide 4 -->
<div class="sp-slide">
<h3 class="sp-layer">Lorem ipsum dolor sit amet</h3>
<p class="sp-layer">consectetur adipisicing elit</p>
</div>
</div>
</div>
I would like that on an hover on each "a" of the .item-0 we go to the slide 0, .item-1 go to the slide 1, .item-2 go to the slide 2 etc.... So I tried something more dynamic :
$('.item-' + i).each(function () {
$(this).mouseover(function () {
$('#carousel').sliderPro('gotoSlide', i);
});
});
Use common class item to all the elements instead of item-n, if not possible you can use attribute starts with selector $('[class^=item]') to select all the elements whose class selects with item. I would also recommend to use it as $('#carousel').find('[class^=item]') to avoid selecting other matching elements on the page.
Instead of repeating the code for all the elements individually, add common event handler with index as follow:
$('[class^=item]').mouseover(function () {
$('#carousel').sliderPro('gotoSlide', $(this).index());
});
HTML:
<div class="views-row views-row-2 views-row-even">
<div class="sonuc">
<span>lorem ipsum dolor sit amet</span>
</div>
<div class="views-field views-field-nothing">
<span class="field-content">Share</span>
</div> <div class="sonucbg"></div>
</div>
<div class="views-row views-row-2 views-row-even">
<div class="sonuc">
<span>lorem ipsum dolor sit amet 2222</span>
</div>
<div class="views-field views-field-nothing">
<span class="field-content">Share</span>
</div> <div class="sonucbg"></div>
</div>
JS:
$('#share').click(function() {
var product_name = jQuery(".sonuc span").html();
FB.ui({
method: 'feed',
name: product_name,
}, function(response) {
if(response && response.post_id){}
else{}
});
});
When I click my .share button, get popup, its OK. But I want, e.g. click first share button, get that text.
How can I do it?
You need to isolate the instance of .sonuc span within the views-row instance based on which button was clicked
Try this:
$('.share').click(function() {
var product_name = $(this).closest('.views-row').find(".sonuc span").html();
/* FB code */
});
What you currently have will always get the html from the first .sonic contained in the page