The HTML codes are like this:
<div id="select1_chzn" class="chzn-container chzn-container-single" style="width: 250px;">
<a class="chzn-single chzn-single-with-drop"
href="javascript:void(0)" tabindex="-1">
<span>AFF5</span>
<div></div>
</div>
I was wondering how I could change the <span>AFF5</span> to <span>Another</span> in jquery.
Does anyone have ideas about this? Thanks!
Could use the id of it parent
$("#select1_chzn span").text("Another");
UPDATE
Using > means direct descendant where as a space means descendant not necessarily direct.
Use the CSS selector
#select1_chzn span
I am not jquery person, but I have seen enough questions here on SO to guess that you would use
$('#select1_chzn span')
$("#select1_chzn span").text("Another");
Simple use of a standard CSS descendant selector should do in this case.
parent child, like this:
$("#select1_chzn span").text('Another');
The title says "How to change the element with no ID in jquery?"
If you want to target all spans with no ID within the div #select1_chzn, you could do
$("#select1_chzn span:not([id])").text(...);
It seems like you want the last span:
$("#select1_chzn span:last").text(...);
You can use any available css-selector for selecting jquery objects, for example this should work:
$('span').text('Another');
You can actually search for spans based on their contents if that is the only way you have of identifying them.
$("span:contains(AFF5)").text( "Another" );
However, this is case sensitive.
Related
I'm trying to find an element with document.querySelector which has multiple data-attributes:
<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3" data-period="current">-</div>
I thought about something like this:
document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"] [data-period="current"]')
But it does not work.
However, it works well, if I put the second data-attribute in a child-element like:
<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"> <span data-period="current">-</span> </div>
So, is there an option to search for both attributes at once?I've tried several options but I don't get it.
There should not be a space between the 2 selectors
document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"][data-period="current"]')
if you give a space between them it will become a descendant selector, ie it will search for an element attribute data-period="current" which is inside an element with data-point-id="7febe088-4eca-493b-8455-385b39ad30e3" like
<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3">
<div data-period="current">-</div>
</div>
space in selector looks for [data-period="current"] in[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"] .You don't need to put space in between attribute value selector:
document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"][data-period="current"]')
This is how I came up with a solution for selecting a specific class by multiple dataset attributes.
document.querySelector('.text-right[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"][data-period="current"]')
What you thought was correct, however you just needed to specify the class you were trying to select.
Similar to this question here, I'm looking to get an element based on it's data-id.
...
I'm looking to take action on the a tag. It has a shared class amongst many other elements and has no base id, just a data-item-id.
Can the element be found by it's data-item-id or can I only find out what the data-item-id is?
$('[data-item-id="stand-out"]')
You can always use an attribute selector. The selector itself would look something like:
a[data-item-id=stand-out]
This worked for me, in my case I had a button with a data-id attribute:
$("a").data("item-id");
Fiddle
Yes, you can find out element by data attribute.
element = $('a[data-item-id="stand-out"]');
How can I use jQuery to select all p tags that have at least one a tag as an immediate child?
For the document:
<div>
<p><a>My Link</a></p>
<p><div><a>My nested Link</a></div></p>
</div>
It would return only the first p tag.
$('p:has(a)')
will do the trick.
http://jsfiddle.net/xKc8T/
Update
The issue with the font tag can be fixed like this:
$('p:has(a):not(:has(font))')
http://jsfiddle.net/xKc8T/1/
Update 2
Okay scrap all that. As per the comments the :has() filter doesn't just look at the direct children. So how about we go the other way and select all a tags and then select the parent of those where the parent is a p.
$('a').parent('p')
or to avoid selecting all a tags you could do
$('p > a').parent()
http://jsfiddle.net/xKc8T/3/
Yet Another Update
Thanks to #BoltClock for this suggestion. The following syntax also works:
$('p:has(> a)')
http://jsfiddle.net/xKc8T/4/
I think you're probably going to have to use .filter() to do this. The following code should do what you need:
$('p').filter(function() { return $(this).children('a').length > 0;});
jsFiddle demo
EDIT: Modified the demo to include valid HTML (replaced the <div> with a <span> inside the second <p>).
It's as easy as:
$("div p:first-child")
You might want to consider applying an id or a class to the div to limit the DOM traversal to just the relevant div and p blocks.
This answer is more or less the same thing, just looking for the last child.
UPDATE Sorry, misread the 'first p tag' bit.
Try this:
$("div p:has(a)")
I'm trying to select the last element of a navigation bar that could have x number of elements. I know that jquery selectors are arraylike objects, so I have tried using bracket notation to select the last element:
$(".navLinks")[$(".navLinks").length - 1].text();
This has not worked. Can anyone help me out with this? How do you select an element within a jquery selector and then attach a method to that element?
Use the :last selector:
$(".navLinks:last").text();
Additional Information
You can read up on all jQuery's selectors here.
I guess
$('.navLinks:last').text();
will do it in a more convinient way.
Read more about selectors
Try:
$(".navLinks:last-child").text();
KISS - use the :last selector. More info here
$(".navLinks:last").text();
If you know the specific type of element you're looking for, .last() may be what you need. Here's an example with 'a'.
$(".navLinks a").last().addClass('myClass');
I have a structure of html like this:
<div id="triger1">some elements inside</div>
<div id="triger2">some elements inside</div>
<div id="triger3">some elements inside</div>
<div id="triger4">some elements inside</div>
How do I get array of all the div's in JQuery with the triger ID in them (as you can see, they all have triger but different numbering eg. triger1, triger2 etc...)
You can use the following:
$("div[id^='triger']")
This will return all <div> with id starting (^=) with triger.
You can get more information about the various jQuery selectors in the jQuery docs:
API/Selectors
you can actually use a regular expression in a selector to achieve exactly what you are looking for, as such:
$("div:regex(id, yourRegularExpression)");
(Note: this does require the regex-selector plugin)
Someone asked a similar question here.
You can read all about regular expressions here.
As others have pointed out, you can achieve the same result like this:
$("div[id^='partOfID']");
by using a simple jQuery selector. For more complex selections, though, you will need to use the regex plugin or do it manually, as noted in the linked question.
good luck!
Select all div elements whose id attribute contains the string triger:
$('div[id*="triger"]');
There's more about using *= in the jQuery documentation: Attribute Contains Selector [name*="value"]
var trigerList = $("div[id^='triger']");