Select brother of parent element relative to 'this' then select children - javascript

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.

Related

How do you get the wider context HTML that wraps a given selector code in jQuery or Cheerio js?

How do you get the entire HTML of h1 + ul > li > details > summary + p only if it has that structure? i.e. it wouldn't get the HTML of a ul tag element if it doesn't have a nested li, details etc.
h1+ul>li>details>summary+p
<div>
<h1>T1</h1>
<ul class="toggle">
<li>
<details>
<summary><strong>Q1</strong></summary>
<p>Answer1</p>
</details>
</li>
</ul>
<h1>T2</h1>
<ul class="toggle">
<li>
<details>
<summary>Q2</summary>
<strong>Answer2</strong>
</details>
</li>
</ul>
</div>
Like this?
const $collection = $("ul.toggle")
.has("li>details>summary+p")
.prev()
.addBack()
.addClass("red")
console.log($collection.text())
.red { background-color:red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<h1>T1</h1>
<ul class="toggle">
<li>
<details>
<summary><strong>Q1</strong></summary>
<p>Answer1</p>
</details>
</li>
</ul>
<h1>T2</h1>
<ul class="toggle">
<li>
<details>
<summary>Q2</summary>
<strong>Answer2</strong>
</details>
</li>
</ul>
</div>

Select html an object <a> with href and child <li>

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

jQuery move/prepend html text in a list not working

I would like to move / prepend each list item text (Brochure A, Brochure B etc) from wpdf_file_name class to the row_downloadbutton > a then remove row_filename
<ul class="wpdf-list-style">
<li class="clearfix">
<div class="row_filename">
<p class="wpdf_file_name">Brochure A</p>
</div>
<div class="row_downloadbutton"><a class="pdf" href="Brochure-A.pdf" target="_blank">Download</a></div>
</li>
<li class="clearfix">
<div class="row_filename">
<p class="wpdf_file_name">Brochure B</p>
</div>
<div class="row_downloadbutton"><a class="pdf" href="Brochure-B.pdf" target="_blank">Download</a></div>
</li>
<li class="clearfix">
...
</li>
<li class="clearfix">
...
</li>
</ul>
This is my jQuery:
jQuery(".row_downloadbutton>a").each(function(){
jQuery(this).prepend(jQuery('.wpdf_file_name').html());
});
jQuery(".row_filename").remove();​
However only Brochure A is getting repeated to the row_downloadbutton..not Brochure B, Brochure C etc etc
I have tried .children(), .siblings(), .closest() but not working.
Thanks!
For each download link, get the .closest() common parent (could be .clearfix or li or both in your case), then .find() the corresponding .wpdf_file_name :
(function($) {
$(".row_downloadbutton > a").each(function() {
$(this).prepend(
$(this).closest('li.clearfix').find('.wpdf_file_name').html()
);
});
$(".row_filename").remove();
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="wpdf-list-style">
<li class="clearfix">
<div class="row_filename">
<p class="wpdf_file_name">Brochure A</p>
</div>
<div class="row_downloadbutton">
<a class="pdf" href="Brochure-A.pdf" target="_blank">
Download
</a>
</div>
</li>
<li class="clearfix">
<div class="row_filename">
<p class="wpdf_file_name">Brochure B</p>
</div>
<div class="row_downloadbutton">
<a class="pdf" href="Brochure-B.pdf" target="_blank">
Download
</a>
</div>
</li>
</ul>
You can use closest and find like this:
jQuery(this).prepend(jQuery(this).closest('li').find('.wpdf_file_name').html());
See demo below:
jQuery(".row_downloadbutton>a").each(function() {
jQuery(this).prepend(jQuery(this).closest('li').find('.wpdf_file_name').html());
});
jQuery(".row_filename").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="wpdf-list-style">
<li class="clearfix">
<div class="row_filename">
<p class="wpdf_file_name">Brochure A</p>
</div>
<div class="row_downloadbutton"><a class="pdf" href="Brochure-A.pdf" target="_blank">Download</a>
</div>
</li>
<li class="clearfix">
<div class="row_filename">
<p class="wpdf_file_name">Brochure B</p>
</div>
<div class="row_downloadbutton"><a class="pdf" href="Brochure-B.pdf" target="_blank">Download</a>
</div>
</li>
<li class="clearfix">
...
</li>
<li class="clearfix">
...
</li>
</ul>

Can't select a child

I got this HTML:
<ul>
<li>Test</li>
<li>Test2</li>
<a href="#" class="with-sub"><li>Test3</li>
<ul class="sub">
<li>Sub1</li>
<li>Sub2</li>
<li>Sub3</li>
</ul>
</a>
</ul>
And jQuery:
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$( document ).ready(function() {
$(".sub").hide();
});
$(".with-sub").click(function() {
$(this).find(".sub").slideDown( "slow", function() {
});
});
</script>
When I click on the link with "with-sub" class nothing happens.
You can change your html and jquery to following:
$(".with-sub").click(function() {
$(this).next("ul").slideDown();
});
.sub {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<a href="#">
<li>Test</li>
</a>
<a href="#">
<li>Test2</li>
</a>
<a href="#" class="with-sub">
<li>Test3
<ul class="sub">
<li>Sub1
</li>
<li>Sub2
</li>
<li>Sub3
</li>
</ul>
</li>
</a>
</ul>
As mention in comments your html is not correct. ul elements can contain zero or more li elements, eventually mixed with ol and ul elements.
$(".with-sub").click(function() {
$(this).find("ul").toggle();
});
.sub {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
Test
</li>
<li>
Test2
</li>
<li class="with-sub">Test3
<ul class="sub">
<li>
Sub1
</li>
<li>
Sub2
</li>
<li>
Sub3
</li>
</ul>
</li>
</ul>
Your current code does not work because you are attempting to bind an event to elements that do not exist in the DOM yet - you need to put the click() handler inside the DOMReady handler.
Also note that your HTML is invalid - only li elements can be direct descendants of the ul element. Try this:
<ul>
<li>
Test
</li>
<li>
Test2
</li>
<li>
Test3
<ul class="sub">
<li>
Sub1
</li>
<li>
Sub2
</li>
<li>
Sub3
</li>
</ul>
</li>
</ul>
Once you've fixed your HTML, the following jQuery will work:
$(document).ready(function() {
$(".sub").hide();
$(".with-sub").click(function() {
$(this).siblings(".sub").slideDown("slow");
});
});
Working example

jquery - Add html content within a selected div like a plugin

I would like to add some html content within a selected div like most of the plugins are.
Eg:
<div id="selected-div">
</div>
$('#selected-div').foo();
When the div (selected-div) is passed to the function, I would like to add the below html content inside that div (selected-div).
<div id="lorem-ipsum-wrapper">
<ul id="lorem-ipsum-main">
<li id="btn-header-wrapper" class="main-btn">
T
<ul>
<li>
T1
</li>
<li>
T2
</li>
<li>
T3
</li>
<li>
T4
</li>
</ul>
</li>
<li class="main-btn">
<b>E</b>
</li>
<li id="btn-justify-wrapper" class="main-btn">
Gender
<ul>
<li>
M
</li>
<li>
F
</li>
<li>
other
</li>
</ul>
</li>
<li class="main-btn" id="btn-list-wrapper">
List
<ul>
<li>
List 1
</li>
<li>
List 2
</li>
</ul>
</li>
<span class="clear_both"></span>
</ul>
</div>
Demo at codepen.
Which after execution should become like this
<div id="selected-div">
<div id="lorem-ipsum-wrapper">
<ul id="lorem-ipsum-main">
...
...
...
</ul>
</div>
</div>
How can I achieve this feature using jquery? Your help and guidance will be very much appreciated. Thank you.
Use .html()
$("#selected-div").html('<div id="lorem-ipsum-wrapper">..');
or .load()
$("#selected-div").load("/path/to/html")
var data = '<div id="lorem-ipsum-wrapper">
<ul id="lorem-ipsum-main">
<li id="btn-header-wrapper" class="main-btn">
T
<ul>
<li>
T1
</li>
<li>
T2
</li>
<li>
T3
</li>
<li>
T4
</li>
</ul>
</li>
<li class="main-btn">
<b>E</b>
</li>
<li id="btn-justify-wrapper" class="main-btn">
Gender
<ul>
<li>
M
</li>
<li>
F
</li>
<li>
other
</li>
</ul>
</li>
<li class="main-btn" id="btn-list-wrapper">
List
<ul>
<li>
List 1
</li>
<li>
List 2
</li>
</ul>
</li>
<span class="clear_both"></span>
</ul>
</div>';
$("#selected-div").html(data);
You can use the JQuery text() method like this
$("#selected-div").text($('#lorem-ipsum-wrapper').text());
Here is the JS code :
$(document).ready(function(){
$("#selecteddiv").load('add.html');
});
and in add.html, you can have your html code which you want to append.
here is the working Plnkr link.
hope it helps you
append would also be an option
http://api.jquery.com/append/
$("#selected-div").append($("<h1>Some content</h1>"));

Categories