Develop Reference

How to retrieve some text from a sibling div element in jQuery

I have some divs on a page in this order as below. When someone clicks a link inside the UL .list-links I want to capture the value of
<span class="asa_portlet_title">Title here</span>
in a variable. I've tried using siblings and closest but it always returns empty.
--
<div class="my_portlet" style="display:none;">
<span class="asa_portlet_title">Title here</span>
</div>
<div class="links">
<div class="">
<ul class="list-links">
<li class="margin-bottom-medium">
Link name
Link name
Link name
Link name
</li>
</ul>
</div>
</div>
--
$('[ul.list-links a').click(function() {
var _portletTitle = $(this).siblings('.my_portlet').text();
});
Open to pure javascript method as well. Basically I have a number of divs on the page containing links, and those divs have another div above it where the title exists
Would anyone be able to put together a small working sample?

You are not trying to get the siblings, you are trying to get the sibling of the parent .links of this.
Also you have to prevent the default action of the a element. You can do that by calling preventDefault() on the event object.
$('ul.list-links a').click(function(event) {
event.preventDefault();
var _portletTitle = $(this).closest('.links').prev('.my_portlet').text();
console.log(_portletTitle);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my_portlet" style="display:none;">
<span class="asa_portlet_title">Title here</span>
</div>
<div class="links">
<div class="">
<ul class="list-links">
<li class="margin-bottom-medium">
Link name
Link name
Link name
Link name
</li>
</ul>
</div>
</div>
<div class="my_portlet" style="display:none;">
<span class="asa_portlet_title">Title here 2</span>
</div>
<div class="links">
<div class="">
<ul class="list-links">
<li class="margin-bottom-medium">
Link name 2
Link name 2
Link name 2
Link name 2
</li>
</ul>
</div>
</div>

Change Div background on active tab - jquery

I have a set of 4 tabs which display content under a main header. Currently i can only show the same header in all tabs as they sit below the header.
Each one is linked by a ID which displays the tabs content. How can i make the background on the header change with Jquery when the link is clicked?
my code is below.
<div class="my-header">
</div>
<div class="wrapper">
<ul class="tab-list">
<li class="tab-title"> Tab 1 </li>
<li class="tab-title">Tab 2 </li>
<li class="tab-title">Tab 3 </li>
<li class="tab-title">Tab 4 </li>
</ul>
<div class="content-1"></div>
<div class="content-2"></div>
<div class="content-3"></div>
<div class="content-4"></div>
</div>

you need something like this:
$('#clickMe').on('click', function() {
$('#changeMe').css('background-image', 'url(http://placehold.it/200x200/ff0000)');
})

Bind the listener to dynamic generate content in HTML

There is a dynamic generate page using jquery like this:
var html = "tab...button..datatable...etc...";
And I generate the page when click on a button
$("btn").on("click",function(){
$("body").append(html);
});
The problem is , all element from generated html does not have event listener, so for the click button /change event I use
$('body').on('change', '.gui-file', function (event) {
However, for the bootstrap element how can I bind the event to the generated element ? e.g. Tab?
Or are there any better way other than binding after generate the html content? Thanks
The tab:
<div class="tab-block mb10">
<ul class="nav nav-tabs nav-tabs-left tabs-border">
<li class="active">
English
</li>
<li class="">
繁體
</li>
<li class="">
简体
</li>
</ul>
<div class="tab-content">
<div id="tab1_1" class="tab-pane active">
</div>
<div id="tab1_2" class="tab-pane">
</div>
<div id="tab1_3" class="tab-pane">
</div>
</div>

Can you please init newly added tab by calling:
$("btn").on("click",function(){
$("body").append(html);
$(".nav-tabs").tab();
});

Show the content based on link click. And hide previously selected

I want to show the content based on link click. and hide the content which was previously selected.
Any way to do it?
Note : I dont want to change the markup.
Here is jsFiddle
html:
<ul class="nav nav-stacked" id="nav-stacked">
<li class="active"><i class="fa fa-dashboard fa-fw"></i>Dashboard
</li>
<li id="vollist-container" class="menu open"><i class="fa fa-sort-alpha-asc fa-fw"></i>Volumes<i class="caret"></i>
<ul id="vol-list" class="submenu">
<li> <a href="javascript:void(0);" onclick="show_content('vol1', this)">
<span>vol1</span>
</a>
</li>
<li> <a href="javascript:void(0);" onclick="show_content('vol2', this)">
<span>vol2</span>
</a>
</li>
</ul>
</li>
</ul>
<div id="content">
<div id="dashboard" class='show'>dashboard</div>
<div id="volumes">
<div id="vol1" class="hide">vol 1</div>
<div id="vol2" class="hide">vol 2</div>
</div>
</div>
jQuery:
function show_content(id, element) {
var children = $("#content").children();
children.filter(function () {
return $(this).css('display') == 'block';
}).hide();
$("#" + id).parent().css('display') == 'none' ? $("#" + id).parent().show() : null;
$("#" + id).toggleClass('hide');
}

This function does what you need:
function show_content(id, element) {
$('#content > div').hide();
$('#' + id).show();
}
Notes:
You do not need the .show and .hide CSS classes
You still need to hide all the content divs on page load either via CSS or via jQuery.
The element parameter is not necessary.
jQuery offers more elegant ways to solve this problem, but the function above should answer your question.

<script>
function showSomething()
{
$("#div1").hide();
$("#div2").show();
</script>
Around your div:
<a href="Javascript:showSomething();">
<div></div>
</a>

adding class to list element after page redirection using jQuery

I will keep my question short for the sake of brevity. I have a page (lets say page 1) on which I have 2 links attached to two different anchor tag and on clicking those anchor tag, I am redirecting user to page 2. However I would like to highlight (add class 'active') on two different list element on page 2, which depends whether the user have clicked anchor 1 or 2 from the previous page. As of now the first li tag is highlight with class active.
This is my HTML markup on page 1 where I have anchor tags
<div class="landing-thumb">
<div class="view view-first">
<div class="mask">
<a id="link1" class="info">Click here</a>
</div>
</div>
</div>
<div class="landing-thumb">
<div class="view view-first">
<div class="mask">
<a id="link2" class="info">Click here</a>
</div>
</div>
</div>
JS for on click event
$('#link1').on('click', function () {
window.location = "/page2";
});
$('#link2').on('click', function () {
window.location = "/page2";
});
On page 2, I have a list which is generated dynamically (by default the first element in list has a class 'active') (only the span id is different for every list element). Here is the rough HTML mark up
<ul id="menu" class="nav nav-pills">
<li class="active">
<a href="#">
<span id="spanLink1">List 1</span>
</a>
</li>
<li>
<a href="#">
<span id="spanLink2">List 2</span>
</a>
</li>
<li>
<a href="#">
<span id="spanLink3">List 3</span>
</a>
</li>
<li>
<a href="#">
<span id="spanLink4">List 4</span>
</a>
</li>
</ul>
Now what I am trying to achieve over here if the user click on link1 from page 1, he/she will be redirected to page 2 with li class active which has span id="spanLink3" and on clicking link2 from page 1 li class active which hasspan id="spanLink4"

Add some hash tag into your url
$('#link1').on('click', function () {
window.location = "/page2#link1";
});
$('#link2').on('click', function () {
window.location = "/page2#link2";
});
And on that page get this hash tag
window.location.hash or use php code also and add class accordint to it