<a href='#' class='lorem'>
foo <div class='ipsum'>bar</div>
</a>
In this code excerpt, I want to get only foo. But if I call $('.lorem').text(), I get div.ipsum also. (which I don't want it)
jQuery or Javascript, both are OK for me.
You are trying to get the text of the first child of the anchor so
var text = $('.lorem').contents().first().text();
snippet.log('text: ' + text)
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' class='lorem'>
foo <div class='ipsum'>bar</div>
</a>
Use a span?
<a href='#' class='lorem'>
<span>foo</span> <div class='ipsum'>bar</div>
</a>
And then:
$('.lorem span').text()
Related
I'm very new to web development stuff so I'm having trouble googling the correct terms here.
The sidebar navigation is working, but the scripts are ugly and redundant.
Is there a way to clean this up? Like store the link id and html file location in an array and just have one script that does the lookup?
I don't need "code for me", just a nudge in the right direction.
Example:
<!DOCTYPE html>
<html>
<link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#navigation_link_1').click(function(){
$('#content_area').load('location_1.html');
});
});
</script>
<script>
$(document).ready(function () {
$('#navigation_link_2').click(function(){
$('#content_area').load('location_2.html');
});
});
</script>
<script>
$(document).ready(function () {
$('#navigation_link_3').click(function(){
$('#content_area').load('location_3.html');
});
});
</script>
<script>
$(document).ready(function () {
$('#navigation_link_4').click(function(){
$('#content_area').load('location_4.html');
});
});
</script>
<body>
<div class="container">
<div id="concept-sidebar"">
<h4 style="text-indent: 0px;"> <strong> My Sidebar </strong></h4>
<div class="container" style="width:100%">
<div class="list-group">
<a id="navigation_link_1"
class="list-group-item custom"
> First Item </a>
<a id="navigation_link_2"
class="list-group-item custom"> Slowly Changing Dimensions (SCD) </a>
<a id="navigation_link_3"
class="list-group-item custom"> Important System Fields
</a>
<a id="navigation_link_4"
class="list-group-item custom"> Reference Data
</a>
</div>
</div>
</div>
</div>
</body>
</html>
There are multiple ways to solve this (and since you asked for a direction and not a solution I'll give give you a general instruction for one of the solutions:):
Instead of settings the click-event-handler on each element - select all the relevant elements and have a click event on all of them:
$('.list-group-item').click(function(){ ... })
The selection here is on all items that have the class list-group-item, which in your case is the <a> elements you are looking for.
Extract the relevant id from the <a> you have (for you can use regex for that, for example). Another option - use the data-* attribute and get the number from that attribute (<a data-id="1"> and $(el).data('id')).
Load the content based on the id you just got:
$('#content_area').load('location_' + id + '.html');
I want to trigger the click on a tag which has div with id='a'.
$(document).ready(function() {
$("#chat_list_content a:has(div[id='a'])").click();
//$("#chat_list_content a:has(div[id='a'])").trigger("click");
$('#chat_list_content a').click(function() {
alert('you are here');
})
})
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div id="chat_list_content">
<a href="#">
<div id="a">A</div>
</a>
<a href="#">
<div id="b">B</div>
</a>
</div>
Click should happen automatically and output alert box. But, there is no respond from the code.
Thanks in advance.
When you call $("#chat_list_content a:has(div[id='a'])").click(), the custom click handler is not yet described yet. That means it doesn't do anything. You just need to move the click trigger below the click function definition:
$(document).ready(function() {
//$("#chat_list_content a:has(div[id='a'])").trigger("click");
$("#chat_list_content a").click(function() {
alert("you are here");
});
// Make sure to add this after the click handler definition above
$("#chat_list_content a:has(div[id='a'])").click();
});
working sandbox: https://codesandbox.io/s/exciting-gagarin-t55er
There is no need to use :has() here at all, you can simply use Attribute Equals Selector [name="value"] to achieve what you are looking for.
$(document).ready(function(){
$('#chat_list_content a').click(function(){
alert('you are here at '+ $(this).index());
});
$('#chat_list_content a div[id=a]').click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chat_list_content">
<a href="#">
<div id="a">A</div>
</a>
<a href="#">
<div id="b">B</div>
</a>
</div>
so I am using Jquery to try and get a href link with a data variable that represents a div to load in an class called tile-are-main... it doesn't seem to be working though...
<script type="text/javascript">
$(function(){
$(".submenu-who.nav-container a").click(function(e){
e.preventDefault();
var url = $(this).attr('href') + ' #' + $(this).attr('data-target');
$('.tile-area-main').load(url);
});
});
</script>
this is the menu with the href in it ...
<body class="metro">
<div class="submenu-who">
<header class='masthead'>
<div class='brand-container'>
<a href='#'>
<span class='brand-initials'>Who Are Musability?</span>
<span><i class="fa fa-briefcase brand-initials-icon"></i></span>
</a>
</div>
<nav>
<div class='nav-container'>
<div>
<a class='slide' href='#' data-target='mission'>
<span class='element'>Mission and Values</span>
</a>
</div>
it is the a href with the data'mission' bit that refers to a div of text that i want into tile-area-main.. to keep it simple.
I think that I am missing out the classes between submenu-who and the a so in theory if i just add them all in with a space between each one that should work ?
Yes, you need to add a space in between. The space is basically meant for all the children inside it, while no space between two classes is used when both the classes are applied to same element.
$(".submenu-who .nav-container a").click(function(e){
e.preventDefault();
var url = $(this).attr('href') + ' #' + $(this).attr('data-target');
$('.tile-area-main').load(url);
});
What I want is to call the showPopup('text goes here'); function and the below block of code to be shown with my text in it.
How can I achieve this?
function showPopup(data) {
}
<a class="fragment" href="#">
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>
<div class="content">
// I WANT TO PUT MY TEXT HERE
</div>
</a>
JSFiddle example: http://jsfiddle.net/tb5musm6/
function showPopup(data) {
var elem = document.getElementsByClassName('content');
elem[0].innerHTML = data;
}
showPopup('asdf');
document.getElementsByClassName will return an array of elements with the given classname
innerHTML variable holds all content between tags
Add an id to you div so you can find it easier.
Then, use innerHTML to modify the content of the div.
<a class="fragment" href="#">
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>
<div class="content" id="content">
// I WANT TO PUT MY TEXT HERE
</div>
</a>
<script>
function showPopup(data) {
document.getElementById('content').innerHTML(data);
}
showPopup('my text');
</script>
Hi im doing a PHP loop where I set a class, this loop make a list of items, and each one of them will have a "share" button that will open a window, (div display:none) the javascript open this div, and it works perfect..
My problem is that in this moment I have inserted the <script> code inside the loop so each item has its own <script></script> code...
Is there any way to do just one and take that code out of the php loop, so I can improve the code.
<script>
$('a.sharebtnc').click(
function(event) {
event.stopPropagation();
$('div.redescompartir').fadeToggle(300);
}
);
</script>
In the Loop well I just add to the class the id like this (id :32 )
<script>
$('a.sharebtnc32').click(
function(event) {
event.stopPropagation();
$('div.redescompartir32').fadeToggle(300);
}
);
</script>
How can I make this script works for all elements no matter the id number, I have no idea, but I know this is the correct way of doing this , right?
The HTML is very simple, its the same for each item... I mean each item has its own div with for <a href="" > </a> elements
<a href="#" class="sharebtnc(id)">
<div class="redescompartir(id)">
<a href="" >Twitter </a>
<a href="" >Facebook </a>
<a href="" >Google </a>
<a href="" >Foursquare </a>
</div>
Add a new class and attribute to the input element like
instead of
<a class="sharebtnc32" />
use
<a class="sharebtnc sharebtnc32" data-id="32"/>
then
jQuery(function ($) {
$('.sharebtnctl').click(function (event) {
event.stopPropagation();
$('.redesopenclose' + $(this).data('id')).fadeToggle(300);
});
})
My preferred method: PHP to generate link between the two elements, then a small snippet of JS to grab which particular one was clicked.
PHP:
$num = 100;
for ($x = 0; $x < $numItems; $x++) {
echo "
<a href='#' class='sharebtn' target='$x'>Share</a>
<div class='redescompartir' id='$x'>
<a href=''>Twitter</a>
<a href=''>Facebook</a>
<a href=''>Google</a>
<a href=''>Foursquare</a>
</div>
";
}
HTML output:
<a href="#" class="sharebtn" target='32'>Share</a>
<div class="redescompartir" id='32'>
<a href="" >Twitter </a>
<a href="" >Facebook </a>
<a href="" >Google </a>
<a href="" >Foursquare </a>
</div>
JS:
$('a.sharebtn').on('click', function(e) {
e.stopPropagation();
var target = $(e.currentTarget).attr('target');
$('#'+target).fadeToggle(300);
});
This way you only need a single <script></script> tag, which your user's broswers will thank you for. :)