I have the following code and I want all the links in the ul to be added #new by javascript , Can you help me?
<ul id="ul-data">
<li class="data">
data 3
</li>
<li class="data">
data 2
</li>
<li class="data">
data 1
</li>
<li class="data">
data 0
</li>
</ul>
I haven't found a solution yet
You can select the elements using the same syntax as css selectors, then you can loop over each selected element and replace the href attribute. The final result would look something like this:
document.querySelectorAll('#ul-data .data a').forEach((el) => {
el.href = el.href + "#new";
});
note that the space is needed in the selector to select the elements inside another element
Related
say i have a list
<ul class="ul-1">
<li class="li-1">xx -1</li>
<li class="li-2">xx -2</li>
<li class="li-3">xx -3</li>
</ul>
i then save it as
var list = $('.ul-1').html();
i can populate another element i.e
$('.ul-2').html(list);
but what if I wanted to replace the first list element <li class="li-1">xx -1</li> with another list element, how do I do this using the list variable? thanks
Firstly note that it's generally better practice to work with references to the elements in the DOM rather than serialising them to strings which need to be deserialised again when re-added to the DOM.
In addition, if you work with the li references you can use jQuery to retrieve the first() of them and then replaceWith() to change it as necessary. Try this:
var $list = $('.ul-1 > li');
$list.appendTo('.ul-2');
$list.first().replaceWith('<li>Foobar</li>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="ul-1">
<li class="li-1">xx -1</li>
<li class="li-2">xx -2</li>
<li class="li-3">xx -3</li>
</ul>
<ul class="ul-2"></ul>
<ul class="drillDownMenu l_drillDown" style="left: -498px;">
<li class="hasSubs">
<a id="RAL10" href="javascript:;">
<ul class="active">
<li class="hasSubs">
<li class="hasSubs">
<a id="AL101117" href="javascript:;">AR Invoices</a>
<ul class="displayed active">
<li>
<a id="FAL10111726" onclick="LoadQueryWindow(this,'104')">AR Invoices</a>
</li>
<li>
<a id="FAL10111727" onclick="LoadQueryWindow(this,'134')">All AR Invoices 1</a>
</li>
</ul>
</li>
I am trying to use the below driver statement,
driver.findElement(By.xpath("//*[contains(#id,'FAL10111727')]")).click();
But this selects the first element, I want to select the last element in the list.
Thanks
Try this xpath expression:
(//ul[ #class='drillDownMenu l_drillDown']//li)[last()]
it picks all li elements that are childs of the topmost ul, then picks the last element from the whole set.
As per the HTML you have shared,
To select the last 'li' which is changing dynamically for each run, All AR Invoices 1 in this case you can use :
driver.findElement(By.xpath("//ul[#class='displayed active']//following::li[last()]")).click();
But, I suppose the <li> tags won't receive a click and you have to invoke click() method on the inner <a> tag instead as follows :
driver.findElement(By.xpath("//ul[#class='displayed active']//following::li[last()]/a")).click();
//I tried using this which worked
driver.findElement(By.cssSelector("ul.displayed li:last-child a")).click();
Say I have this HTML:
<ul class="list-group" id="words">
<li class="list-group-item"><span class="badge">10</span>Apple</li>
<li class="list-group-item"><span class="badge">50</span>Banana</li>
<li class="list-group-item"><span class="badge">30</span>Carrot</li>
</ul>
I'm looking for a jQuery selector that will select a list item like Banana and then be able to edit its child badge to whatever value.
I was looking around and saw some very complex selectors involving contains (which isn't exact enough for me already) and lambda functions/loops spanning multiple lines and was wondering if there was a better way.
Fiddle Example.
You can use .data() like #dsh mentioned in comment, see the example below :
HTML :
<ul class="list-group" id="words">
<li class="list-group-item" data-text="Apple"><span class="badge">10</span>Apple</li>
<li class="list-group-item" data-text="Banana"><span class="badge">50</span>Banana</li>
<li class="list-group-item" data-text="Carrot"><span class="badge">30</span>Carrot</li>
</ul>
JS :
$( ".list-group-item[data-text='Banana'] .badge" ).text(); //50
Hope this helps.
$("li:contains(Banana)>.badge").text("whatever")
should be the proper selector for jQuery. However, you should try to avoid :contains() if you are not specific. The selector above has to search in every list element. If you only search in the given list use
$("#words>li:contains(Banana)>.badge").text("whatever")
instead or use data Attributes, as dsh has commented,
I inherited template with the menu in which categories and subcategories is in the same scope. Here is an example:
<ul class="menu">
<li class="cat" data-item-type="category"></li>
<li data-item-type="sub-category"></li>
<li data-item-type="sub-category"></li>
<li data-item-type="sub-category"></li>
<li data-item-type="sub-category"></li>
<li class="cat" data-item-type="category"></li>
<li data-item-type="sub-category"></li>
<li data-item-type="sub-category"></li>
<li data-item-type="sub-category"></li>
<li data-item-type="sub-category"></li>
<li class="cat" data-item-type="category"></li>
<li class="cat" data-item-type="category"></li>
<li data-item-type="sub-category"></li>
<li data-item-type="sub-category"></li>
</ul>
I cant change the structure of this, but can add extra attributes to it.
So my question is if it is possible to select all categories subcategories when clicking on one of subcategories. In general i need to select all li until first class="cat" or data-item-type="category" occurrence including it - category and all it's subs.
Update answer per OP's update:
$('li[data-item-type="sub-category"]').click(function() {
$(this)
.add( $(this).nextUntil('.cat') )
.add( $(this).prevUntil('.cat') )
.prev('.cat').addBack() //in jQuery < 1.8, replace addBack by andSelf
//do something
});
Demo
After some brainstorming in the comments, here's a shorter alternative:
$('li[data-item-type="sub-category"]').click(function() {
$(this).prevAll('.cat:first').nextUntil('.cat').addBack()//do something
});
Demo
So .prevAll('.cat:first') matches the first previous .cat, nextUntil('.cat') gets all its subcategories and addBack (or andSelf in older versions) adds the .cat element back to the set of matched elements.
In up-to-date jQuery versions, the .add() and .addBack() methods sort the matched elements in document order, hence both alternatives will have .cat as the first element in the set followed by the subcategories in document order.
Reference
add
addBack
first
nextUntil
prev
prevUntil
This will solve your problem according to your request (updated) for category and subs (not buggy)
$('li').click(function() {
var x = $(this).add($(this).nextUntil('.cat')).add($(this).not('.cat').prevUntil('.cat')).andSelf().add($(this).not('.cat').prevAll('.cat:first'));
});
for clicking on the subs or the cat and selecting the other subs around it with it's category too
Use jQuery .nextUntil
$('li.cat').on('click', function() {
$(this).nextUntil('.cat');
/* then write you logic here */
});
Is there a way to search elements based on data attributes?
I have the following code and would like to know how can this be achieved
<UL>
<LI data-relation_id=1/>
<LI data-relation_id=1/>
<LI data-relation_id=1/>
<LI data-relation_id=2/>
<LI data-relation_id=2/>
<LI data-relation_id=2/>
<LI data-relation_id=3/>
<LI data-relation_id=3/>
<LI data-relation_id=3/>
</UL>
On a click event I basically want to find out all the items that belong to a specific data-relation?
function getRelatedObjects(relationId){
//Search all the li's and get the LI
//that have the data-relation_id== relationId
}
Can this be done using jquery?
The data attribute is just an attribute, so you can use the attribute selector.
$('li[data-relation_id='+relationId+']')
You can't search by associated data specifically, but if the data is set by attribute then you can search using the attribute selector:
function getRelatedObjects(relationId){
return $('li[data-relation_id="'+relationId+'"]');
}
JSFiddle