$(":not(selector)") in plain/ vanilla javascript? [duplicate] - javascript

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.

Related

How can I access my vue instance when in a v-for loop?

I have a v-for loop
<div v-for="index in 6" :key="index">
<div class="card h-100" style="margin-top: 200px;">
<a href="#">
<img
class="card-img-top"
src="https://i.picsum.photos/id/345/700/400.jpg?hmac=oQMF95pIPaAEnln8qWEjerYF_2lcuFsfl_KnwjHnpXc"
alt
/>
</a>
<div class="card-body">
<h4 class="card-title">
<p>{{ this.itemData[index].name }}</p>
</h4>
<p
class="card-text"
>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!</p>
</div>
<div class="card-footer">
<small class="text-muted">★ ★ ★ ★ ☆</small>
</div>
</div>
</div>
</div>
</div>
I get the following error:
TypeError: Cannot read property 'itemData' of undefined
However, I can reference this same line of code outside of the loop and it will be displayed.
I also get issues when I run this.itemData[0].price, price being a present element in the itemData[0] object. Any help is appreciated!
The error TypeError: Cannot read property 'itemData' of undefined happens because you're using this. prefix within the template, which is not recommended.
I've even found that there's a rule for that in the official ESLint plugin for vue:
https://eslint.vuejs.org/rules/this-in-template.html
Hope it helps!
Relevant CodePen
v-for="index in 6" is going to start at 1:
1, 2, 3, 4, 5, 6.
But arrays start at 0.
If your array contains 6 items, this will fail because itemData[6] does not exist. In fact, if it did not fail, it would still skip the first item in the array, itemData[0].
In your template, change your binding to:
{{ itemData[index - 1].name }}

Passing span classes to data attribute with jquery [duplicate]

This question already has answers here:
Find nested element in query
(5 answers)
Closed 5 years ago.
I am after some assistance in passing the value of my span classes to a data attribute (data-groups) contained in their parent divs all with the same class (.item). Here is my current code.
<div class="item" href="#" data-groups="">
<div class="caption">
<p><span class="value1"></span>Description</p>
</div>
</div>
<div class="item" href="#" data-groups="">
<div class="caption">
<p><span class="another-value"></span>Description</p>
</div>
</div>
<div class="item" href="#" data-groups="">
<div class="caption">
<p><span class="third-value"></span>Description</p>
</div>
</div>
<script type="text/javascript">
$(".item").attr("data-groups", function() {
return $('.caption p span').attr('class');
});
</script>
This works somewhat but it populates all data-groups attributes with "value1". I am wanting them all to receive the data attribute from their respective child span classes. Eg, First item div should have a 'data-groups'attribute of 'value1', second with 'another-value', etc.
I'm a little rusty with jquery but learning as I go. Any assistance is appreciated.
Try this:
$(".item").attr("data-groups", function() {
return $(this).find('.caption p span').attr('class');
});

Jquery how to find element from outside

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.

Creating JQuery div class filter not working

I am trying to make a filter with JQuery that hides all div's and then only shows div's depending on a class inside it called "brand", I managing to get it to hide all div's however it will not show the ones matching the class.
The alert I have added inside the statement is showing so I think it may be something to do with the parent show, has anyone got any ideas?
The html:
<div class="section-link" id="section-tooltip" data-content="Popup with option trigger" rel="popover" data-placement="right" title="" data-original-title="">
<div class="section-features" style="display: none;">
<p><i class="icon-star"></i> protective, waterproof lid</p>
<p><i class="icon-star"></i> enhanced wooden coating</p>
<p><i class="icon-star"></i> long lasting materials</p>
<p><i class="icon-star"></i> 2 year warranty</p>
<p><i class="icon-star"></i> includes durable bag</p>
</div>
<div class="brand tp" style="display: none;"></div>
<div class="price" style="display: none;"> £47.99</div>
<a href="Garden-Games-Picnic-Table-Sandpit-6407.html">
<img src="picnic_table_sandpit.jpg" title="Garden Games Picnic Table Sandpit" alt="Garden Games Picnic Table Sandpit" width="220">
<h3 align="center">Garden Games Picnic Table Sandpit</h3>
<p align="center">
<span> was: £69.99</span>
<span> Now: £47.99</span>
<span class="button">More Info</span>
</p>
</a>
<a name="a6407"></a>
</div>
/\ there are about 20 div's like this with different brand classes example class="brand garden"
The Js:
function brand(string){
var brand = string;
$('.section-link').hide();
if ($('.section-link').children('.brand').hasClass(brand)) {
alert(brand);
$(this).parent().show();
}
}
I am also testing via the chrome url bar javascript: brand("tp");
Any help greatly appreciated,
Simon
You need to use multiple selector here because you need to fetch .brand elements which also have the specified class
function brand(string){
var brand = string;
$('.section-link').hide();
$('.section-link').children('.brand.' + brand).parent().show();
}
Demo: Fiddle

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