Looking for option in js/css to select (n) <li> in my code, but i need to have indicate that <li> have parent with current <a> with specyfic indicated href link.
CATEGORY NAME
<div class="123">
<div class="categories ">
<span>Categories:</span>
<ul>
<li>
1
</li>
<li>
2 this is what i need to select
</li>
</ul>
</div>
</div>
Many thanks for respound!
Cheers!
Try:
li a[href='https://someweb.com/']:eq(1)
$("li a[href='https://someweb.com/']:eq(1)").css("background","red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
1
</li>
<li>
2 this is what i need to select
</li>
<li>
3
</li>
You want to select that specific URL?
a[href='https://specificWeb.com/']{
background: red;
}
CATEGORY NAME
<div class="123">
<div class="categories ">
<span>Categories:</span>
<ul>
<li>
1
</li>
<li>
2 this is what i need to select
</li>
</ul>
</div>
</div>
But i think a better solution will be by using classes:
.my-target-url {
background: red;
}
CATEGORY NAME
<div class="123">
<div class="categories ">
<span>Categories:</span>
<ul>
<li>
1
</li>
<li>
<a class="my-target-url"href="https://specificWeb.com/"> 2 this is what i need to select </a>
</li>
</ul>
</div>
</div>
And if urls are not hardcoded, add a logic that toggles the class
Related
I am new to Selenium and trying to build a project with it. I need to learn how to click a JS link. There are many items listed by pages. Pagination is done by JS, unfortunately. here is an example...
<ul class="pagination museo-700">
<li class="first hidden disabled">
First
</li>
<li class="prev disabled">
<a class="arrow" href="#">
<img src="/areas/site/Content/images/page/pagination-prev-arrow.png">
</a>
</li>
<li class="page active">
1
</li>
<li class="page">
2
</li>
<li class="page">
3
</li>
<li class="page">
4
</li>
<li class="page">
5
</li>
<li class="next">
<a class="arrow" href="#">
<img src="/areas/site/Content/images/page/pagination-next-arrow.png">
</a>
</li>
<li class="last hidden">
Last
</li>
</ul>
I would like to click pages 1., 2., 3. ,4. and 5. pages above. Please give me a clue
You could first locate the pager with a CSS selector and then each link by link text:
driver.FindElement(By.CssSelector("ul.pagination"))
.FindElement(By.LinkText("1")).Click();
You could also use an XPath:
driver.FindElement(By.XPath("//a[#href='#'][text()='1']")).Click();
code not tested but I feel like they should work
.page > a:contains("1")
.page > a:contains("2")
.page > a:contains("3")
.page > a:contains("4")
.page > a:contains("5")
or
//li[contains(#class, 'page')]/a[text()='1']
If the user hovers over Test then the href attribute of the link in the ´ul´ list e.g. the link of google should be outputted. But i have no idea how i can access the a tag from this.
$("ul.myul li:nth-child(2) div:nth-child(1)").on
(
"mouseover",
function()
{
$link = $(this).closest('a').attr("href");
$("#output").html($link);
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myul">
<li>
<div>
yahoo
</div>
</li>
<li>
<div>Test</div>
<div>Foo</div>
</li>
</ul>
<ul class="myul">
<li>
<div>
google
</div>
</li>
<li>
<div>Test</div>
</li>
</ul>
<ul class="myul">
<li>
<div>
bing
</div>
</li>
<li>
<div>Test</div>
</li>
</ul>
<p id="output"></p>
I've already tried find and closest but nothing helped.
$("ul.myul li:nth-child(2) div").on("mouseover",function(){
$link = $(this).parent().prev('li').find('a').attr("href");
$("#output").html($link);
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myul">
<li>
<div>
yahoo
</div>
</li>
<li>
<div>Test</div>
</li>
</ul>
<ul class="myul">
<li>
<div>
google
</div>
</li>
<li>
<div>Test</div>
</li>
</ul>
<ul class="myul">
<li>
<div>
bing
</div>
</li>
<li>
<div>Test</div>
</li>
</ul>
<p id="output"></p>
Use .pareent() to get the li
Use .prev() to get the li of the anchor
Use find to get the anchor
$(this).parents('ul').find('a') gives you all the links in the same UL.
Trying to delete specific Node of HTML.
First HTML:
There many List in .widget-content want to delete all .list without First Li. Means keep first-child.
<div class="wrapper delete">
<div class="widget-content">
<ul>
<li class="lists">
Content
</li>
<li class="lists"> <!-- Delete this-->
Content
</li>
<li class="lists"> <!-- Delete this-->
Content
</li>
</ul>
</div>
</div>
Second HTML:
Want to delete ul of .widget-content ul if .wrapper has class delete. Condition need.
<div class="wrapper delete">
<div class="widget-content">
<ul> <!-- Delete This -->
<li class="lists">
Content
</li>
<li class="lists">
Content
</li>
<li class="lists">
Content
</li>
</ul>
</div>
</div>
How to do this by JS/jquery? Fiddle example would be helpful.
$(document).ready(function () {
$('.widget-content li').not(':first-child').remove();
if ($(".wrapper").hasClass('delete')) {
$('.widget-content ul').remove();
}
});
slice can be used to select elements with a start and end.
$('.widget-content li.lists').slice(1).remove();
$('.wrapper.delete ul').remove();
Hi :) i need to make HTML hierarchy drop down list it consists of levels(options) and each option if has child nodes we will see arrow beside it if we click on this arrow all this options will disappear and all child nodes will appear ..... and each one has an arrow beside it in left and another one in right if we click on left arrow all this options will disappear and parent level will appear and if we click on right arrow the next level will appear and so on when i search about it i found tree drop down list but my manager don't want it :( ..... pleas if some one have any idea or link about this drop down i hop to till me ....thank you :)
http://jsfiddle.net/1jwyauLy/
<ul class="level1">
<li> <span> → Option 1</span>
<ul class="level2">
<li> <span class="lar">←</span> Option 1.1</li>
<li> <span class="lar">←</span> Option 1.2</li>
<li> <span class="lar">←</span> Option 1.3</li>
</ul>
</li>
<li> <span> → Option 2</span>
<ul class="level2">
<li> <span class="lar">←</span> Option 2.1</li>
<li> <span class="lar">←</span> Option 2.2</li>
<li> <span class="lar">←</span> Option 2.3</li>
</ul>
</li>
<li><span> → Option 3</span>
<ul class="level2">
<li> <span class="lar">←</span> Option 3.1</li>
<li> <span class="lar">←</span> Option 3.2</li>
<li> <span class="lar">←</span> Option 3.3</li>
</ul>
</li>
</ul>
$(".level2").hide();
$(".level1>li").on("click", function () {
$(this).find(".level2").show();
$(this).find(">span").hide();
$(".level1>li").not(this).hide();
})
$(".lar").on("click", function () {
$(".level1>li").show();
$(".level2").hide();
$(this).closest(".level2").prev("span").show();
return false;
})
ul {
list-style-type: none;
margin:0;
padding:0;
}
I tried all day to re-order this menu like I need but I am new to jquery..
What I am trying to do is:
Inside the last td.top from this menu there are 3 ul.sub li, I want each to be extracted from there and it's content put inside a td.top.
Then inside the content there is a div and a link, I need to switch positions, the link must be before the div (just like inside the other td.top)
Basically I try to make the 3 ul.sub. li identical (add same classes, have same structure etc, like the rest of td.top)
How can I do this?
I appreciate any tips..
This is the code I used so far:
$("ul.sub a.more_top_element").removeClass('button more_top_element').addClass("top_link").removeAttr('style').removeAttr('value');
$("ul.sub div").removeClass('more_sub').addClass("sub");
.. here I should have the code to extract the content inside the 3 ul.sub li and switch the link with the div, then wrap it in a td.top..
This is the html I need to modify with jquery:
<table class="topMenu" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="top">
<a href="http://localhost/d7t/m/photos/home/" class="top_link"><span class="down bx-def-padding-sec-leftright">Photos</span>
<!--[if gte IE 7]><!-->
</a>
<!--<![endif]-->
<div class="sub">
<!--[if lte IE 6]><table id="mmm"><tr><td><![endif]-->
<ul class="sub main_elements">
<li>
Home
</li>
<li>
Albums
</li>
<li>
Recent
</li>
<li>
Top
</li>
<li>
Popular
</li>
<li>
Featured
</li>
<li>
Tags
</li>
<li>
Categories
</li>
<li>
Rater
</li>
<li>
Calendar
</li>
<li>
Search
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
</td>
<td class="top">
<a href="http://localhost/d7t/m/poll/&action=poll_home" class="top_link"><span class="down bx-def-padding-sec-leftright">Polls</span>
<!--[if gte IE 7]><!-->
</a>
<!--<![endif]-->
<div class="sub">
<!--[if lte IE 6]><table id="mmm"><tr><td><![endif]-->
<ul class="sub main_elements">
<li>
Polls Home
</li>
<li>
All Polls
</li>
<li>
Popular
</li>
<li>
Featured
</li>
<li>
Calendar
</li>
<li>
Search
</li>
<li>
Tags
</li>
<li>
Categories
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
</td>
<td class="top">
<a href="javascript: void(0);" onclick="void(0);" class="top_link">
<span class="down bx-def-padding-sec-leftright">More</span>
<!--[if gte IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table id="mmm"><tr><td><![endif]-->
<div style="position:relative;display:block;">
<ul class="sub">
<li class="">
<div class="sub">
<ul class="sub main_elements">
<li>
Sites Home
</li>
<li>
All Sites
</li>
<li>
Admin Sites
</li>
<li>
User Sites
</li>
<li>
Top Rated
</li>
<li>
Popular
</li>
<li>
Featured
</li>
<li>
Tags
</li>
<li>
Categories
</li>
<li>
Calendar
</li>
<li>
Search
</li>
</ul>
</div>
Sites
<div class="clear_both sub">
</div>
</li>
<li class="">
<div class="sub">
<ul class="sub main_elements">
<li>
Sounds home
</li>
<li>
Sound albums
</li>
<li>
All Sounds
</li>
<li>
Top Sounds
</li>
<li>
Popular Sounds
</li>
<li>
Featured Sounds
</li>
<li>
Tags
</li>
<li>
Categories
</li>
<li>
Rater
</li>
<li>
Calendar
</li>
<li>
Search
</li>
</ul>
</div>
Sounds
<div class="clear_both sub">
</div>
</li>
<li class="">
<div class="sub">
<ul class="sub main_elements">
<li>
Store Home
</li>
<li>
Recent
</li>
<li>
Top Rated
</li>
<li>
Popular
</li>
<li>
Featured
</li>
<li>
Free
</li>
<li>
Tags
</li>
<li>
Categories
</li>
<li>
Calendar
</li>
<li>
Search
</li>
</ul>
</div>
Store
<div class="clear_both sub">
</div>
</li>
<li class="li_last_round"> </li>
</ul>
</div>
<div class="clear_both">
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</td>
</tr>
</tbody>
</table>
This is kind of a lot of questions, not just one, and probably not particularly well suited for stackoverflow.
You want to select the last td with class top. This should be done using the last-child selector:
$( "table.topMenu td.top:last-child" ) // you won't use this, just showing the hierarchy
Then, from within this td, you want to select each of the divs with class sub.
$( "table.topMenu td.top:last-child div.sub" )
That should select all the content of the div you want. Then you need to select the content of the links in this same section like so:
$( "table.topMenu td.top:last-child a.top_link" )
You should store them into javascript objects, like so:
var divs = $( "table.topMenu td.top:last-child div.sub" ).remove();
var links = $( "table.topMenu td.top:last-child a.top_link" ).remove();
These lines will remove them from the DOM, but save the jQuery objects for later use (Note that since these selectors will get multiple DOM elements they are jQuery objects, not DOM elements at this point). You should then be able to append them as needed with an appropriate selector. You may also want to call:
$( "table.topMenu td.top:last-child" ).remove();
as well to clean up the DOM.