I have a jQuery selector which I am using to apply a tooltip to an element:
TooltipBuilder.buildRackDisplayTooltip(this.$el, rackInformationListView.render().$el);
My element does not have an id. It does not need one because this.$el uniquely identifies the element.
I would like to modify my statement such that the selector now matches two elements:
// Doesn't work
var selector = this.$el + this.$el.children('.rackName');
I am hoping to trigger a mouseout event only when the mouse leaves this.$el or when the mouse enters some, but not all, descendants of this.$el
Is it possible to create such an expression without assigning an id to this.$el?
If my element had an id, I might use a selector such as:
var selector = $('#' + this.el.id + ' ,' + this.el.id + ' > .rackName');
although this still seems unnecessarily verbose
You can combine the elements(probably your variable says selector) using add
var selector = this.$el.add(this.$el.children('.rackName'));
You can even provide just selector strings to add as well.
var selector = this.$el.add('someselector');
And to add on for just in the first example, where you are trying to get the children and add parent to it. You can use var selector = this.$el.children('.rackName').addBack();, second example you can use .add() for distinct selectors.
Related
var b = ('data-type');
if ($(b + ":contains('cover')")) {
$(".sided-sections .widget").addClass("cate-cover")
}
i want repair this code please because when I add this code it adds a class to all elements that contain " .sided-sections .widget " so I want to dedicate something to that where the class adds on data-type='cover' only and thank you
A jQuery selector doesn't return a true/false value that can be used in .match(). If you want to know if a selector finds anything, you need to get its length.
Furthermore, if doesn't set this to the elements that the selector matches. If you want to set this, you need to use .each() to loop over all the matching elements.
$(b + ":contains('cover')").each(function() {
$(this).siblings(".sided-sections .widget").addClass("cate-cover");
});
But you don't even need that, because you can apply .siblings() directly to the selector:
$(b + ":contains('cover')").siblings(".sided-sections .widget").addClass("cate-cover");
If this doesn't work, add the HTML to your question, and point out which elements should get the cate-cover class. You might have the relationships between the selectors wrong.
There is an element I really want to select with document.querySelector. The problem is that the makers of the site I work on, didn't give any identifier to this element.
It's just one of about 600 spans in the webpage with a huge DOM and I've no desire (nor the spare time) to manually count all spans in the DOM to know what item reference span[n] // n == number to use as it would be a nightmare and there must be some other better way, at least to get the item reference via devtool.
Selection ways I tried so far
I tried to copy "Css path" or "Css selector" and put either inside my code:
let myEl = document.querySelector('CSS-PATH-FROM-DEVTOOL');
myEl.click();
let myEl = document.querySelector('CSS-SELECTOR-FROM-DEVTOOL');
myEl.click();
Yet the element wasn't selected in both cases and no click happened.
Selecting via textDocument isn't good because there are many spans with the same textDocument.
Utilizing Xpath for selection
I understand that in such a "special" case when an element has no IDs, classes, to make it unique and is just one tag of many of the same kind, and neither CSS path or CSS selector helps targeting, then I could use Xpath.
Well, when I copy the Xpath I get:
*[#id="js_30"]/div/ul/li[4]/a/span/span
My question
How could this be used to select the element with document.querySelector?
As I'm new to JS, I tried the following which didn't help, the element won't be clicked:
let myEl = document.querySelector(' *[#id="js_30"]/div/ul/li[4]/a/span/span ');
MyEl.click();
Is there a way to target to select only that particular element, directly?
Based on an answer by Utkanos, you can do this:
var elem,
xpath = '*[#id="js_30"]/div/ul/li[4]/a/span/span',
jq_sel = xpath
.substr(14) // remove id part
.replace(/\//g, ' > ')
.replace(/\[(\d+)\]/g, function ($0, i) { return ':nth-child(' + i + ')'; });
// add id part: #js_30 > div > ul > li:nth-child(4) > a > span > span
jq_sel = '#js_30' + jq_sel;
// query element
elem = document.querySelectorAll(jq_sel);
// simulate a mouse click
elem.click();
console.log("*");
console.log("xpath:", xpath);
console.log("jq_sel:", jq_sel);
console.log("elem:", elem);
I have a problem with hiding the other divs when the target one is active, so, my jQuery is:
$(".popup-itens").click(function () {
var selector = "#" + $(this).data("target");
$(selector).toggle();
console.log(selector);
});
I just simply want to hide all the other data-targets divs that are different from $(this).
I've tried if statement and other stuff, but nothing seems to really work.
You could negate the current element (this) using the .not() method:
$('.popup-itens').not(this).hide();
Therefore it would look something like this:
$(".popup-itens").click(function () {
var selector = "#" + $(this).data("target");
$(selector).toggle();
$('.popup-itens').not(this).hide();
});
Alternatively, depending on the markup, you could also select all the elements with data-target attributes using an attribute selector, then negate the current selector:
$('[data-target]').not(selector).hide();
I had a basic question on the jquery selector.
$(function () {
$('.grid').hover(function(){
var divId = $(this).attr("divId");
var $this = $('#' + divId);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
});
});
If I were to hover on a div with the class="grid", how can have all the divs as found by var $this = $('#' + divId); change their imgs? Meaning, when this function executes, only the first div with the appropriate id has it's img src change. I would like it so that all the divs with that appropriate id (attribute) change rather than the first one change.
Also, I would appreciate any help with where I could modify this so that when the img changes it's fades in 'slow'.
Thanks.
The specific difference between an ID and a Class attribute is that IDs are expected to always be unique, whereas classes are intended to be used to identify a group of elements which share a common grouping. If you have multiple elements with the same ID, you are using HTML incorrectly. By rewriting your code such that each element has a unique ID, you can count on those IDs identifying the specific element they're associated with and then give groups of elements which you want to select together a specific class, which is the appropriate way to select a group of elements like you're trying to.
How can I determine what's the type of a element?
For example, I have a function that's hooked on all elements that have a certain class. These elements can be textareas, iframes, divs etc. I want to find out what kind of element is the current one.
Use Element Selector to get specific type elements.
And use tagName to get the type of a specific element.
How can I determine the element type of a matched element in jQuery?
Here is some working example
HTML:
<span class="some"></span>
<div class="some"></div>
jQuery:
$('.some').each( function ( index ) {
document.write(index + ':' + $(this).attr("tagName").toLowerCase() + '<br/>');
});
You can call attr("tagName"):
$("a").attr("tagName");