suppose i have some html dom elements like
<slot></slot>
<slot name='slotWithName'></slot>
how to find the first slot dom through querySelector() method?
i have tried document.querySelector("slot :not([name])")
just not work :(
ok, i find the anwser by myself
Array.prototype.slice.call(document.querySelectorAll('slot'))
.filter(function(el){ return !el.name })
Try this:
querySelector('slot:not([name])')
Related
I need to create the element and then delete it. Is there a way to find the element by it's text after it was created?
The xpath of the element is //div[#id='mif-tree-6']/span/span[3].
You can use xpath for it for example. Like:
//div[#id='mif-tree-6']//span[contains(text(),'your_text_here')]
UPDATE
Please provide an example of your html. It is possible to find a parent of your element with xpath and after that to find all the childs. For example your html =
<div id='lol'>
<div>first_item</div>
<div>second_item</div>
<div>third_element</div>
</div>
You get an array of elements with xpath =
//div[contains(text(),'first_')]/../div
So you can do something like:
click | //div[contains(text(),'first_')]/../div[2]
BUT if there are a lot of brothers-elements to find by text of one sibling it will be necessary to use loop to get every of them.
Once again. If you will provide full information about what are you doing and an example of your html it will be much easier to suggest.
If I have something like this:
<div class="class1">
<img src="image.jpg" id="image1">
</div>
How do I move this image to another div in tritium?
I think this should work, try it out (class2 is the id of the class to what you want to move the image):
$("//div[contains(#class,'class2')]") {
move_here("//img[#id='image1']")
}
There might be other ways but this is quite simple and working.
I figured out that I need to use move_to() but I don't know how exactly. If someone explain I'd be glad.
html() {
$("//img[#id='image1']") {
move_to("//div[contains(#class,'class2')]")
}
}
Can also be done using move_to function.
http://tester.tritium.io/6526e5d20c148c1634bb8094fffb8c55a13c3d76
I am trying to select a div based on its height, as shown in this tutorial,
jQuery Selection. I cannot get it to work: jsbin example . The line not working is:
$('div[height=50px]').css('background-color', 'orange');
That's an attribute equals selector, so the HTML it would match is:
<div height="50px"></div>
You could change it to:
$('div[style="height:50px"]').css('background-color', 'orange');
According to comments, the above doesn't work in Internet Explorer. Try the following instead:
$('div').filter(function() {
return $(this).css('height') == '50px';
}).css('background-color', 'orange');
If you want to match other elements with a height of 50px not specified using an attribute, take a look at the .filter() function.
If your HTML is...
<div style="height:50px;"></div>
Then your selector should be...
$('div[style*="height:50px"]');
If you are setting height to the value of "50px" and " 50px" (common), you will need to adjust accordingly...
$('div[style*="height:50px"], div[style*="height: 50px"]');
If you change the CSS of this element, the div's style attribute might become: "height:50px;background-color:orange", and it would cease to get picked up by this selector.
Docs: https://api.jquery.com/attribute-contains-selector/
I am trying to select the surround element when a image within the span is clicked 'remove()', but I am a little new to jQuery and can't figure out how to do it. I can't use a unique id as the element are generated dynamically.
For example:
<span class='type_link'> <img src='/images/deleteCross.gif' onclick='remove()' />Example</span>
I want to select the span when the image is clicked.
Here is an example to hide the parent element of the image:
<span class='type_link'> <img src='/images/deleteCross.gif' onclick='$(this).parent().hide();' />Example</span>
The trick is to use "this" and the parent()-function.
Cheers,
Chris
Look at this (for selector) and this (for event)!
Also W3schools provide Good example for first step in Jquery.
How about .parent() http://api.jquery.com/parent/
typically when you refer to an object you would use a selector like this :
$(this).jqueryfunction()
if u would need an element within this object you would use :
$('typicalselector',this).jqueryfunction()
My question is how would I use jquery selector to select various objects something along the lines of :
($(this.fistobject) and $(this.secondObject)).jqueryfunction()
thanks for your help
When you wrap an object or run a selector, you get a set or collection. So this would return a collection and then add another collection to it, and then perform jqueryfunction() to the combined set:
$('someSelector').add('anotherSelector').jqueryfunction()
This works with contexts, too.
You can use a comma, just like in CSS. I.e.
$('div, a', this)
would select all div and a elements in 'this'.
I dont think you can work jQuery on Javascript objects, they should be jQuery-wrapped HTML Elements.
You can use multiple selectors like this:
$(selector1, selector2, ..., selectorn).jqueryfunction();