Jquery how to find element from outside - javascript

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.

Related

Manipulate content # for all div elements (with role="tabpanel") - style="display: none;" to display: block;

How to manipulate a website to change all
div elements (with role="tabpanel") - style="display: none;" to style="display: block;"
via class="accordionItemContent" could be possible as well
I would like to see the whole page/div elements with total content (so it doesn't matter is the manipulation is via JS or CSS .. or jquery)
<div class="accordionItemContent accordion ui-reset widget uibottom" role="tabpanel" style="display: none;"></div>
Because the page is behind a login probably a change via site inspect/console would be one way to go.
Update
I have been to fast when writing about "display"
if "block" it only shows a frame without content
I saw that there is another main difference in the element shown vs all other hidden once:
<h1 class="uiaccordion" role="tab" a-exp="false" a-sel="false" tabindex="-1"><a href="#" id="manage_content_11_ac" tabindex="-1"></div>
<h1 class="uiaccordion" role="tab" a-exp="true" a-sel="true" tabindex="0"> <a href="#" id="manage_content_12_ac" tabindex="-1"></div>
-> How to see/activate the content as well?
jQuery...
$("div[role='tabpanel']").show();
or...
$('.accordionItemContent').show();
Run this in console
document.querySelectorAll('div.accordionItemContent.accordion.ui-reset.widget.uibottom[role="tabpanel"]').forEach(e => {
e.style.display = "block";
});
Edited for edited question, only using class accordionItemContent
document.querySelectorAll('div.accordionItemContent[role="tabpanel"]').forEach(e => {
e.style.display = "block";
});
To change the other attributes as mentioned in the update:
document.querySelectorAll('div.accordionItemContent[role="tabpanel"]').forEach(e => {
e.style.display = "block";
e.setAttribute(“tabindex”, 0) // Use this syntax to change all effected attributes
});
One approach could be creating a generic CSS class to hide elements and add/remove it to the element(s) you want to hide/show:
function showDivs() {
document.querySelectorAll('[role=tabpanel]').forEach(elem => elem.classList.remove('hide'));
}
.hide {
display: none;
}
<button onclick="showDivs()">show hidden DIVs</button>
<div class="accordionItemContent accordion ui-reset widget uibottom hide" role="tabpanel">DIV1: Lorem ipsum dolor sit consecutor amet</div>
<div class="accordionItemContent accordion ui-reset widget uibottom hide" role="tabpanel">DIV2: Lorem ipsum dolor sit consecutor amet</div>
<div class="accordionItemContent accordion ui-reset widget uibottom hide" role="tabpanel">DIV3: Lorem ipsum dolor sit consecutor amet</div>
If you prefer to stick with inline CSS, instead, you can modify the code above in this way:
function showDivs() {
document.querySelectorAll('[role=tabpanel]').forEach(elem => {
elem.style.display = 'block';
/*
* NOTE: if the inline style contains only the display property,
* you could even entirely remove it:
*
* elem.removeAttribute('style');
*/
});
}
<button onclick="showDivs()">show hidden DIVs</button>
<div class="accordionItemContent accordion ui-reset widget uibottom" role="tabpanel" style="display: none;">DIV1: Lorem ipsum dolor sit consecutor amet</div>
<div class="accordionItemContent accordion ui-reset widget uibottom" role="tabpanel" style="display: none;">DIV2: Lorem ipsum dolor sit consecutor amet</div>
<div class="accordionItemContent accordion ui-reset widget uibottom" role="tabpanel" style="display: none;">DIV3: Lorem ipsum dolor sit consecutor amet</div>

Ordering appended classes with Jquery

I want to ask, is this possible to order appended classes? For example, in my JSFiddle i want to get on mobile look Lorem ipsum dolor sit amet when Im appending classes.
There's my JQuery
$(".cont-1, .cont-2, .cont-3, .cont-4").clone().prependTo(".mobile-content");
P.S. There's no way to change class order in .content
There's no way to do that in a single selector as elements are generally ordered as they are found in the DOM (although that in itself isn't guaranteed either).
You would need to sort() the elements if you want to affect their order. Given your sample you would need to create an array which holds the values in the correct order which you can then use to compare the indexes within the sort() method, something like this:
$(".cont-1, .cont-2, .cont-3, .cont-4").clone().prependTo(".mobile-content");
var ordering = ['lorem', 'ipsum', 'dolor', 'sit amet'];
$('.mobile-content div').sort(function(a, b) {
return ordering.indexOf(a.innerText.trim().toLowerCase()) - ordering.indexOf(b.innerText.trim().toLowerCase());
}).appendTo('.mobile-content');
div.content > div {
display: inline
}
div.mobile-content > div {
display: inline;
margin: 0 5px 0 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Original look:<br />
<div class="content">
<div class="cont-2">ipsum</div>
<div class="cont-1">Lorem</div>
<div class="cont-4">sit amet</div>
<div class="cont-3">dolor</div>
</div><br />
Mobile look:<br />
<div class="mobile-content"></div>
This pattern becomes arguably redundant when dealing with a single set of elements (as above) as you could just generate the div elements in order from your ordering array, instead of cloning them and then sorting them.
You could use an array of selectors, and prepend one by one
['.cont-1', '.cont-2', '.cont-3', '.cont-4'].reverse().forEach(function(s) {
$(s).clone().prependTo(".mobile-content");
});
div.content>div{display:inline}
div.mobile-content>div{display:inline;margin:0 5px 0 0}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Original look:<br />
<div class="content">
<div class="cont-2">ipsum</div>
<div class="cont-1">Lorem</div>
<div class="cont-4">sit amet</div>
<div class="cont-3">dolor</div>
</div>
<br />Mobile look:<br />
<div class="mobile-content">
</div>
Or sort by classname
$(".cont-1, .cont-2, .cont-3, .cont-4").clone().sort( (a,b) =>
a.className.localeCompare(b.className)
).prependTo(".mobile-content");
div.content>div{display:inline}
div.mobile-content>div{display:inline;margin:0 5px 0 0}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Original look:<br />
<div class="content">
<div class="cont-2">ipsum</div>
<div class="cont-1">Lorem</div>
<div class="cont-4">sit amet</div>
<div class="cont-3">dolor</div>
</div>
<br />Mobile look:<br />
<div class="mobile-content">
</div>

Is it possible to automatically copy a div's content as an input's value

I wanted to know whether it is possible to copy particular div's content as an input element's value automatically when page is loaded.
Maybe something like this:
document.getElementById("myInput").value = document.getElementById("myDiv").innerHTML;
base on brso05's answer,
document.getElementById("myInput").value = document.getElementById("myDiv").innerHTML;
<div id="myDiv">some input value</div>
<form><input id="myInput" type="text" /></form>
I actually modified the above answers, in order to get only the text, because they were selecting all html tags/Attribute e.g <br> <p> <div>
$("#text").val($("#my-div").text()) ;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="my-div">
<div id="first">THIS is first div</div>
<p>Lorem ipsum dolor sit amet, consectetur <b>perspiciatis </b></p>
<div id="second">THIS is second div</div>
</div>
</br>
<input type="text" id="text"/>

Dynamic Facebook share button via jQuery

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

jQuery append current div

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/

Categories