<ul id="component-list" class="no-left-margin">
<li class="component-items hide">
<span>Login</span>
<a href="#">
<i class="icon-remove"></i>
</a>
</li>
<li class="component-items">
<span>Register</span>
<a href="#">
<i class="icon-remove"></i>
</a>
</li>
</ul>
I'm trying to get a list of items that are visible (span tags inside li tags without the hide class)
$('.component-items span').not('.hide');
The above selector is giving me an empty array.
I need the selector to give me the span tags within <li> without the hide class.
$('.component-items').not('.hide').find('span');
$('.component-items:visible span')
http://api.jquery.com/visible-selector/
Cheers!
I like to use css pseudo class :not().
$(".component-items").find("span:not(.hide)")
Hope it helps you
Related
I'm making a chrome extension and one of the features is to click on one of the items in the list code below.
<ul class="js-tweet-actions tweet-actions full-width ">
<li class="tweet-action-item pull-left margin-r--13 "> <a class="tweet-action " href="#" rel="retweet"> <i class="js-icon-retweet icon icon-retweet icon-retweet-toggle txt-center"></i> <span class="is-vishidden">Retweet</span> </a> </li>
<li class="tweet-action-item pull-left margin-r--13 margin-l--1"> <a class="js-show-tip tweet-action position-rel" href="#" rel="favorite" title="" data-original-title=" Like from ILoveTomFan "> <i class="js-icon-favorite icon icon-favorite icon-favorite-toggle txt-center"></i> <span class="is-vishidden"> Like </span> </a> </li>
</ul>
How would I mimic a browser click on these elements, the code below is what I tried and it has no effect at all, it doesnt correctly click the element that is being displayed.
I have tried;
document.getElementsByClassName("js-show-tip tweet-action position-rel").click;
document.getElementsByClassName("tweet-action-item pull-left margin-r--13 margin-l--1").click;
document.getElementsByClassName("js-icon-favorite icon icon-favorite icon-favorite-toggle txt-center").click;
var test = x[y].querySelectorAll("li");
test[2].click;
Thanks #Zevee specially the code that made this work was
x[y].querySelector('.js-show-tip.tweet-action.position-rel').click();
Your first three don't work because there is an array of elements and because classname only takes one class (iirc)
Try document.querySelector(<here, put every single class that you want to select seperated by dots (in a string)>).click()
Note that this selects the first element with all of those classes (iirc)
<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();
I have cloned this template :
http://ironsummitmedia.github.io/startbootstrap-grayscale/
When you scroll-down, notice that the background-color of the header-link(About, Download, contact) on top will change to gray color (depending upon the section where you have scrolled).
I have made some small changes to the header wherien I am including font-awesome icons. The color effect has however stopped working.
<ul class="nav navbar-nav nav-advance-options hide-this-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#flax">
<i class="fa fa-leaf"></i>
</a>
</li>
<li>
<a class="page-scroll" href="#moist">
<i class="fa fa-heart"></i>
</a>
</li>
<li>
<a class="page-scroll" href="#designs">
<i class="fa fa-paw"></i>
</a>
</li>
</ul>
http://plnkr.co/edit/0MV3QzRpJcPWlpuNMDav
I can't tell exactly where your javascript has gone wrong by the assets you've provided, but the issue is that on the font awesome icon version of the site (http://plnkr.co/edit/0MV3QzRpJcPWlpuNMDav), the active class is not being added to the menu li elements upon scroll, whereas it is being added to the li elements on the demo site (http://ironsummitmedia.github.io/startbootstrap-grayscale/).
solved the issue by removing the following lines from second ul:
<li class="hidden">
</li>
I don't know why this solves the issue yet. If someone understands, kindly explain
How can I remove all occurrences of tags with a particular class only and not the contents inside in it of an html page using jquery or javascript?
For example the following must be converted
<a class="ab">
<ol>
<a class="ab">
<li><a class="ab">
abcde</a>
</li>
<li>
<a class="ab">
12354
</a>
</li>
</a>
</ol>
</a>
into
<ol>
<li>
abcde
</li>
<li>
12354
</li>
</ol>
I want to remove all a tags with class= "ab" with retaining the elements and contents inside it
Use .replaceWith() , it's brief and works perfectly as you want :[DEMO HERE]
$("a.ab").replaceWith(function() { return this.innerHTML; });
OUTPUT:
<ol>
<li>
abcde
</li>
<li>
12354
</li>
</ol>
You can try replaceWith
jQuery('.ab').each(function(){
jQuery(this).replaceWith(jQuery(this).html());
});
Demo
http://jsfiddle.net/SHReE/
jQuery Api
http://api.jquery.com/replaceWith/
What about unwrap?
$('a.ab').contents().unwrap();
contents() - Get the children of each element in the set of matched elements, including text and comment nodes.
unwrap() - Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.
try this
$('.ab').each(function() {
var val = $(this).html();
$(this).parent().html(val);
$(this).remove();
});
You could use:
$("a .ab").each(function() {
$(this).remove();
});
The original HTML codes are like this:
<div>
<ul class="alt">
<li> <a class="button1"> Button1 </a></li>
<li> <a class="button2"> Button2 </a></li>
</ul>
</div>
And then I'd like to change it to this:
<div>
<a class="button1"> Button1 </a>
</div>
Does anyone know how to implement this in jquery?
you can get fist elemnt by either .first() or :first Selector
$('div').html($('div li:first').html())
or try
$("div").html($('li').first().html());
Jsfiddle
You can do it this way.
Live Demo
$('.alt').closest('div').html($('.alt li:first').html());
Its better to assign some id to div you are intending to make it unique, so that the changes you make are limited to this div.
HTML
<div id="div1">
<ul class="alt">
<li> <a class="button1"> Button1 </a></li>
<li> <a class="button2"> Button2 </a></li>
</ul>
</div>
Javascript
$('#div1').html($('#div1 li:first').html());
Or this :)
$('.alt').replaceWith( $('.alt>li:eq(0)').contents() );
Or just for fun:
$('.alt>li:eq(0)').unwrap().siblings().remove().end().contents().unwrap();