Can anyone tell me how I can get all the values on a specific attribute value on each loop ? I'm trying to get all the html values on each loop that has the specific attribute value( data-product=momentum-shorts ) <p>Two-Way Stretch </p> in this case..
This is my code
<script>
jQuery( document ).ready(function() {
$(".compare-main .compare-products").each(function(){
$(this).each(function(){
console.log($(this).html());
})
});
});
</script>
You can use the attribute equals selector :
$(".compare-main .compare-products [data-product='momentum-shorts']").each(function(){
console.log($(this).html().trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="compare-main">
<div class="compare-products">
<div data-product="momentum-shorts">
<p>Two-Way Stretch</p>
</div>
<div data-product="foo">
<p>foo</p>
</div>
</div>
<div class="compare-products">
<div data-product="bar">
<p>bar</p>
</div>
<div data-product="momentum-shorts">
<p>Medium Weight</p>
</div>
</div>
</div>
You can use the jQuery attr() method
$(this).data('column') or $(this).data('product')
.data()
Related
I am trying to detach the div from the relevant parent and then append to the same parent div.
//Jquery Code
jQuery(function(){
moveColorDots();
});
function moveColorDots(){
var copyDivData = jQuery('.variations_form.wvs-archive-variation-wrapper').detach();
copyDivData.appendTo('.product-variations');
}
<div class="pp-content-post">
<div class="variations_form wvs-archive-variation-wrapper">
some data here
</div>
<div class="product-box">
<div class="glasses-sec">
<h3>title</h3>
</div>
<div class="product-variations"></div>
</div>
</div>
Expected result.
But after running the above code I am getting the following result.
.detach Description: Remove the set of matched elements from the DOM.
That means you append all the detached elements to every product-variations element ..So
You need to loop through the variations_form.wvs-archive-variation-wrapper elements by using .each()
Also you can use .appendTo() directly
//Jquery Code
jQuery(function(){
moveColorDots();
});
function moveColorDots(){
jQuery('.variations_form.wvs-archive-variation-wrapper').each(function(){
var product_variations = jQuery(this).next('div').find('.product-variations');
jQuery(this).appendTo(product_variations);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pp-content-post">
<div class="variations_form wvs-archive-variation-wrapper">
some data here 1
</div>
<div class="product-box">
<div class="glasses-sec">
<h3>title</h3>
</div>
<div class="product-variations"></div>
</div>
</div>
<div class="pp-content-post">
<div class="variations_form wvs-archive-variation-wrapper">
some data here 2
</div>
<div class="product-box">
<div class="glasses-sec">
<h3>title</h3>
</div>
<div class="product-variations"></div>
</div>
</div>
Note: This line of code var product_variations = jQuery(this).next('div').find('.product-variations'); is depending on your html structure it works for the posted html here .. But if you've another html structure you need to modify it to catch the desired element
{"__reactInternalInstance$scd8ef5s9":{"tag":5,"key":null,"elementType":"div","type":"div","stateNode":"~","return":{"tag":5,"key":null,"elementType":"div","type":"div","stateNode":{"__reactInternalInstance$scd8ef5s9":"~__reactInternalInstance$scd8ef5s9~return","__reactEventHandlers$scd8ef5s9":{"id":0,"style":{"position":"absolute","zIndex":0,"display":"flex","justifyContent":"center","alignItems":"center","width":100,"height":100,"backgroundColor":"white"},"className":"box resizable","children":[{"type":"div","key":null,"ref":null,"props": "props..." ......
console.log(CircularJSON.stringify($(this).find("div")[0]));
Prints it.
Here is the html:
<div
className="myClass"
>
<div
className="resizerClass"
id="tomatoes"
>
<div className="resizers">
</div>
</div>
<div className="resizers"></div>
</div>
I need the id os resizerClass div? how to get it?
If you want to find ID by jQuery as your HTML attributes(className) then you can define attribute in square bracket like $('[className="resizerClass"]') and get other attributes value like attr('id').
$(document).ready(function(){
var getId = $('[className="resizerClass"]').attr('id');
console.log('id='+getId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div className="myClass">
<div className="resizerClass" id="tomatoes">
<div className="resizers"></div>
</div>
<div className="resizers"></div>
</div>
I'm learning Javascript and jQuery and I'm stuck at this one problem. Let's say my code looks like this:
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Now, if i click one of the div's, i want the other ones to disappear.
I know, I could create 4 functions for each one of them with on.click hey and display none with how , are and you. But is there a easier way? I bet there is, with classes maybe?
Thanks for responding!
Use siblings to get reference to its "brothers".
Given a jQuery object that represents a set of DOM elements, the .siblings() method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements.
$('div').click(function(){
$(this).siblings().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Or you can hide all the other div which not the clicked element using not
Remove elements from the set of matched elements.
$('div').click(function() {
$('div').not(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
You can just hide siblings() of clicked div.
$('div').click(function() {
$(this).siblings().fadeOut()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey">hey</div>
<div id="how">how</div>
<div id="are">are</div>
<div id="you">you</div>
Yeah there are some easier ways and I could tell a one from it,
Set a common class to all the elements that you are gonna target,
<div class="clickable" id="hey"> hey </div>
<div class="clickable" id="how"> how </div>
<div class="clickable" id="are"> are </div>
<div class="clickable" id="you"> you </div>
And you have to bind a single click event by using a class selector,
$(".clickable").on("click", function(){ });
Now use the .siblings() functions to hide the required elements,
$(".clickable").on("click", function(){
$(this).siblings(".clickable").hide();
});
But using a toggle instead of hide would sounds logical,
$(".clickable").on("click", function(){
$(this).siblings(".clickable").toggle();
});
Since you can do the same operation over all the elements.
You can use not to avoid element and this will indicate current instance.
$(document).ready(function(){
$("div").on("click",function(){
$("div").not(this).hide("slow");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Assign a class to each of the elements:
<div id="hey" class='sth'> hey </div>
<div id="how" class='sth'> how </div>
<div id="are" class='sth'> are </div>
<div id="you"class='sth' > you </div>
And write a js function onclick.
Remove class 'sth' from 'this' element in this function
Hide all elements with class 'sth' $('.sth').hide();
For this example - you don't need to add any further selectors to target the div's although in reality - this solution wwould cause all divs on the page to be affectecd - adding classes would be my actual suggestion: - but this works for this example. Click a div and all divs are hidden then the clicked one is shown. I also added a reset button to allow all divs to reappear.
$('div').click(function(){
$('div').hide();
$(this).show();
});
$('#reset').click(function(){
$('div').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
<hr/>
<button type="button" id="reset">Reset</button>
$(document).ready(function(){
$("div").on("click",function(){
$("div").not(this).toggle("slow");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
I'm trying to get all the next html code and excluding the DIV with ID=fiscal-address-info using jquery. I started using filter method but no lucky.
This is the original snippet code.
<div id="fiscal-info" class="content-fields">
<div class="content-title"><h2>Datos Fiscales</h2></div>
<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>
<div id="fiscal-address-info">
<div class="row">...</div>
<div class="row">...</div>
</div>
What I'd like to get is:
<div id="fiscal-info" class="content-fields">
<div class="content-title"><h2>Datos Fiscales</h2></div>
<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>
</div>
This is what I've tried:
$('#fiscal-info').filter('#fiscal-address-info');
You can use the filter method and using a not selector:
$("#fiscal-info").children().filter(":not(#fiscal-address-info)")
This return you all the fiscal-info children ,except the excluded one.
You can use the .not() method or :not() selector
http://api.jquery.com/not-selector/
Code based on your example:
$('div#fiscal-info div').not("#fiscal-address-info");
Have a look into this fiddle
$( "div" ).filter( $( "#fiscal-address-info" ) );
Gets all div elements and filters them for id #fiscal-address-info
Hope this helps!
$('#fiscal-info div').filter(function () {
return this.id == 'fiscal-address-info'
}).remove();
jsFiddle example
I have a few divs set up like so:
<div class="menu_options">
<div class="parent_div">input field</div>
<div class="children_div">
<div class='something">field</div>
<div class="something_else">field</div>
</div>
</div>
<div class="menu_options">
<div class="parent_div">input field</div>
<div class="children_div">
<div class='something">field</div>
<div class="something_else">field</div>
</div>
</div>
<div class="menu_options">
<div class="parent_div">input field</div>
<div class="children_div">
<div class='something">field</div>
<div class="something_else">field</div>
</div>
</div>
in jquery i am doing
$('.parent_options').each(function() {
$(this).click(function() {
});
});
right now $(this) is giving me the parent_div that i clicked on and I need to be able to move down to the children_div and hide the entire children_div. Any ideas. I know in prototype i used a down function but not sure if jquery has it.
If you want to hide .children_div after clicking on .parent_div use
$('.parent_div').click(function() {
$(this).siblings(".children_div").hide();
});
Demo here
$('.parent_div').each(function() {
$(this).click(function() {
$(this).next().hide();
});
});
If you're binding the function to all .menu-options, there's no need for each(). This should work if I understood your query properly:
$('.parent_div').click(function() {
$(this).siblings('.children_div').hide();
});
try .next()
$( this ).next( ".tb-contents'" ).show();
This will work.
Thanks