Trying to pull a text string from block of HTML - javascript

I'm trying to pull a text string (an article title) from a piece of HTML. In this case, it's "Journalist Allegedly Spied on Zoom Meetings of Rivals in Hilariously Dumb Ways."
The problem is, the title doesn't have any identifiers I can see. It's in a few places in the HTML, but the divs it's in don't have stable names.
I tried:
var url = $(uCW).find('[href^="https://l.facebook"]').text();
But get the wrong chunk of text. (uCW is the variable name I gave to the div this is all in — it works fine for grabbing other information here). Really, I'm having trouble figuring out how to select it — in theory I could specify the exact children everything is in, but the children change a lot and I'd like to use a more stable method.
<div class="_1dwg _1w_m _q7o" data-vc-ignore-dynamic="1">
<div></div>
<div class="_4r_y">
<div class="_6a uiPopover _5pbi _cmw _b1e _1wbl" id="u_fetchstream_4_6"><a aria-label="Story options" data-testid="post_chevron_button" class="_4xev _p" aria-haspopup="true" aria-expanded="false" rel="toggle" href="#" role="button" id="u_fetchstream_4_7"></a></div>
</div>
<div>
<div class="v_zhq0t5rr6 _5eit p_zhq0tbcbb clearfix">
<div class="clearfix c_zhq0t5thj">
<a target="" class="_5pb8 u_zhq0tbcb8 _8o _8s lfloat _ohe" title="Person" aria-hidden="true" tabindex="-1" data-ft="{"tn":"m"}" href="https://www.facebook.com/j.newsham?fref=nf&__tn__=%2Cdm-R-R&eid=ARBC4Tpii73ko-nTTzvjgbhv8Uvq1GIHitUe_IHE0Ksi1su-LTuENPi9GCWskRJMLwp4VMol7R2filWQ" data-hovercard="/ajax/hovercard/user.php?id=675172323&extragetparams=%7B%22__tn__%22%3A%22%2Cdm-R-R%22%2C%22eid%22%3A%22ARBC4Tpii73ko-nTTzvjgbhv8Uvq1GIHitUe_IHE0Ksi1su-LTuENPi9GCWskRJMLwp4VMol7R2filWQ%22%7D" data-hovercard-prefer-more-content-show="1">
<div class="_38vo">
<!-- react-mount-point-unstable -->
<div><img class="_s0 _4ooo _5xib _5sq7 _44ma _rw img" src="https://scontent-ort2-2.xx.fbcdn.net/v/t1.0-1/p112x112/38427941_10156325214622324_8412493305270501376_n.jpg?_nc_cat=110&_nc_sid=dbb9e7&_nc_ohc=e5WgZHVuabcAX-4npCK&_nc_ht=scontent-ort2-2.xx&_nc_tp=6&oh=eb95679d9ee7fb5be65b6bdb23dcf7b2&oe=5ECE2ADB" alt="" aria-label="Person" role="img"></div>
</div>
</a>
<div class="clearfix _42ef">
<div class="rfloat _ohf"></div>
<div class="l_zhq0t5thg">
<div>
<div class="_6a _5u5j">
<div class="_6a _6b" style="height:40px"></div>
<div class="_6a _5u5j _6b">
<h5 class="_7tae _14f3 _14f5 _5pbw _5vra" data-ft="{"tn":"C"}" id="js_9e"><span class="fwn fcg"><span class="fwb fcg" data-ft="{"tn":";"}"><a title="Person" href="https://www.facebook.com/j.newsham?__tn__=%2CdC-R-R&eid=ARBQdCphQpNyE52IVRqnH7bi35xke_7h8ucoRhm-SykkuyeLTHQwdjplzLmwjPJI_2_SlLcyDWm9pGoB&hc_ref=ARRHpOlTgvosbrodRaKBuoiUQmaEP0kbw6SoEqUpbxJ-qgG56wADKG8zO652g3vacIc&fref=nf" data-hovercard="/ajax/hovercard/user.php?id=675172323&extragetparams=%7B%22__tn__%22%3A%22%2CdC-R-R%22%2C%22eid%22%3A%22ARBQdCphQpNyE52IVRqnH7bi35xke_7h8ucoRhm-SykkuyeLTHQwdjplzLmwjPJI_2_SlLcyDWm9pGoB%22%2C%22hc_ref%22%3A%22ARRHpOlTgvosbrodRaKBuoiUQmaEP0kbw6SoEqUpbxJ-qgG56wADKG8zO652g3vacIc%22%2C%22fref%22%3A%22nf%22%7D" data-hovercard-prefer-more-content-show="1" data-hovercard-referer="ARRHpOlTgvosbrodRaKBuoiUQmaEP0kbw6SoEqUpbxJ-qgG56wADKG8zO652g3vacIc">Person</a></span></span></h5>
<div class="_5pcp _5lel _2jyu _232_" id="feed_subtitle_675172323:7304407797214710582" data-testid="story-subtitle">
<span class="z_zhq0t6o5b"><span class="fsm fwn fcg"><a class="_5pcq" href="/j.newsham/posts/10157963951497324" target=""><abbr data-utime="1588120184" title="Tuesday, April 28, 2020 at 7:29 PM" data-shorten="1" class="_5ptz timestamp livetimestamp"><span class="timestampContent" id="js_9f">16 hrs</span></abbr></a></span></span><span class="_6spk" role="presentation" aria-hidden="true"> · </span>
<div class="_6a _29ee _4f-9 _43_1" data-hover="tooltip" data-tooltip-content="Shared with: Person's friends" role="img" aria-label="Shared with: Person's friends"><span><i class="_1lbg img sp_Ke6ZUJH-N4S_1_5x sx_73b6dc"></i></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="userContent"></div>
<div class="_3x-2" data-ft="{"tn":"H"}">
<div data-ft="{"tn":"H"}">
<div class="mtm">
<div id="u_fetchstream_4_1" class="_6m2 _1zpr clearfix _dcs _4_w4 _41u- _59ap _2bf7 _64lx _3eqz _20pq _3eqw _2rk1 _359m _3n1j _5qqr" data-ft="{"tn":"H"}">
<div class="clearfix _2r3x">
<div class="lfloat _ohe">
<span class="_3m6-">
<div class="_63yw">
<div class="_6ks">
<a href="https://gizmodo.com/journalist-allegedly-spied-on-zoom-meetings-of-rivals-i-1843125262?utm_campaign=Gizmodo&utm_content&utm_medium=SocialMarketing&utm_source=facebook&fbclid=IwAR3MOk2OqjX3z6DNKgdmlVDtcYQz4xIx-CRsQOuV39hVGZR_U-TjgqTKSHQ" aria-describedby="u_fetchstream_4_3" aria-label="Journalist Allegedly Spied on Zoom Meetings of Rivals in Hilariously Dumb Ways" tabindex="-1" target="_blank" rel="noopener nofollow" data-lynx-mode="asynclazy" data-lynx-uri="https://l.facebook.com/l.php?u=https%3A%2F%2Fgizmodo.com%2Fjournalist-allegedly-spied-on-zoom-meetings-of-rivals-i-1843125262%3Futm_campaign%3DGizmodo%26utm_content%26utm_medium%3DSocialMarketing%26utm_source%3Dfacebook%26fbclid%3DIwAR3MOk2OqjX3z6DNKgdmlVDtcYQz4xIx-CRsQOuV39hVGZR_U-TjgqTKSHQ&h=AT0v6E7lQPPlUT-t8yQbu0DBEukuzdXli3s4pdRZxCF9EVtUE0omFYcc-fOtFYQJIHWOVgDfrGhVsH4T3uqimv560qNSBhRnwdM_iCwl4BQJ1f9r5rrk9K1zibH3nA9ZhUT6-YdcIkm7lBZtJYn6SKbWmmPzJsBUI-LcjNoQHXw">
<div class="accessible_elem inlineBlock" id="u_fetchstream_4_3">Financial Times reporter Mark Di Stefano allegedly spied on Zoom meetings at rival newspapers the Independent and the Evening Standard to get scoops on staff cuts and furloughs due to the coronavirus pandemic, according to a report from the UK’s Independent. And he did a comically bad job of cover...</div>
<div class="_6l- __c_">
<div class="uiScaledImageContainer _6m5 fbStoryAttachmentImage" style="width:514px;height:268.42222222222px;"><img class="scaledImageFitWidth img" src="https://external-ort2-2.xx.fbcdn.net/safe_image.php?d=AQCX1CnigNk3SZXL&w=540&h=282&url=https%3A%2F%2Fi.kinja-img.com%2Fgawker-media%2Fimage%2Fupload%2Fc_fill%2Cf_auto%2Cfl_progressive%2Cg_center%2Ch_675%2Cpg_1%2Cq_80%2Cw_1200%2Fy3dmfzz6ktqefakczlow.jpg&cfs=1&upscale=1&fallback=news_d_placeholder_publisher&_nc_hash=AQAApLwXk6n73twX" data-src="https://external-ort2-2.xx.fbcdn.net/safe_image.php?d=AQCX1CnigNk3SZXL&w=540&h=282&url=https%3A%2F%2Fi.kinja-img.com%2Fgawker-media%2Fimage%2Fupload%2Fc_fill%2Cf_auto%2Cfl_progressive%2Cg_center%2Ch_675%2Cpg_1%2Cq_80%2Cw_1200%2Fy3dmfzz6ktqefakczlow.jpg&cfs=1&upscale=1&fallback=news_d_placeholder_publisher&_nc_hash=AQAApLwXk6n73twX" style="top:0px;" alt="" width="514" height="269" aria-label="photo of Journalist Allegedly Spied on Zoom Meetings of Rivals in Hilariously Dumb Ways image"></div>
</div>
</a>
</div>
<a class="_34js _8o63 _1kaa _34jt _34ju _2cpc" ajaxify="/feed/article_context/dialog/?share_id=10157963951502324&entry_type=news_feed_learn_more&trigger_log_id=bd3a8ea2-29fb-4ee2-b335-c27d26be3c85&ft_msg=mf_story_key.10157963951497324%3Atop_level_post_id.10157963951497324%3Atl_objid.10157963951497324%3Acontent_owner_id_new.675172323%3Athrowback_story_fbid.10157963951497324%3Astory_location.4%3Astory_attachment_style.share" href="#" rel="dialog-post" data-ft="{"tn":"-T"}" role="button" data-hover="tooltip" data-tooltip-content="Show more information about this link" data-tooltip-alignh="right" id="u_fetchstream_4_8"><i class="_34k2"></i></a>
</div>
<div class="_3ekx _29_4">
<div class="_6m3 _--6">
<div class="_59tj _2iau">
<div>
<div class="_6lz _6mb _1t62 ellipsis">gizmodo.com</div>
<div class=""></div>
</div>
</div>
<div class="_3n1k">
<div class="mbs _6m6 _2cnj _5s6c">Journalist Allegedly Spied on Zoom Meetings of Rivals in Hilariously Dumb Ways</div>
<div class="_6m7 _3bt9">Financial Times reporter Mark Di Stefano allegedly spied on Zoom meetings at rival newspapers the Independent and the Evening Standard to get scoops on staff cuts and furloughs due to the coronavirus pandemic, according to a report from the UK’s Independent. And he did a comically bad job of cover...</div>
</div>
</div>
<a href="https://l.facebook.com/l.php?u=https%3A%2F%2Fgizmodo.com%2Fjournalist-allegedly-spied-on-zoom-meetings-of-rivals-i-1843125262%3Futm_campaign%3DGizmodo%26utm_content%26utm_medium%3DSocialMarketing%26utm_source%3Dfacebook%26fbclid%3DIwAR2sRF3AjujE4KgspWs5ltmxgtABX46iAmdHGCVxDmWSzYu93cO_d1EMMfc&h=AT1duKty7qVugflB4dskMMBn6j1M0FJ-cneezEPDTrI6c2IcEKkCT1YZ6-8Bw2oad-n0gZZBFU5Mk-iTNkLo-up1anlYj_l_pIvZEVXz-2WPYAeQrILewicbiMd8Gj6ziLDys5z7PLZy2syfD1-HTufQ12efucyRp3hHa8mCcvGyPH1jtw" aria-label="Journalist Allegedly Spied on Zoom Meetings of Rivals in Hilariously Dumb Ways" aria-describedby="u_fetchstream_4_2" rel="noopener nofollow" tabindex="-1" target="_blank" class="_52c6" data-lynx-mode="asynclazy">
<div class="accessible_elem" id="u_fetchstream_4_2">Financial Times reporter Mark Di Stefano allegedly spied on Zoom meetings at rival newspapers the Independent and the Evening Standard to get scoops on staff cuts and furloughs due to the coronavirus pandemic, according to a report from the UK’s Independent. And he did a comically bad job of cover...</div>
</a>
</div>
</span>
</div>
<div class="_42ef"><span class="_3c21"></span></div>
</div>
</div>
</div>
</div>
</div>
<div></div>
</div>
</div>

You can get the text e.g. by selecting a href starting with l.facebook that contains an element with the class name accessible_elem using :has() as this element contains the text.
var copy = $(uCW).find('[href^="https://l.facebook"]:has(".accessible_elem")')
.find(".accessible_elem").text();
Update: As mentioned as comment, this does not target the wanted text. Instead, it's possible to read out the aria-label attribute of this link as it contains the right text:
var copy = $(ucw).find('[href^="https://l.facebook"]:has(".accessible_elem")').attr("aria-label");

Related

how to show a console message when element is in focus?

can you please help me how to show a console message any child element of a parent is focused ?I am focusing through tab. When My focus move to any child element of a parent . i want to show a console message . here is my code
const container = document.querySelector('#rc20p3');
container.addEventListener('focusin', (e) => {
console.log(e.relatedTarget);
if (container.contains(e.relatedTarget)) console.log('focus is now outside of container');
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type="text"/>
<input type="text"/>
<div id="rc20p3" class="rc20panel"><div class="rh02panel rh02carousel rh02carouselinit rh02random rh02p3 rh02stopped " data-trackas="rc20:panel3" role="button"><div class="rh02w2 rh02-slide1 bgimg rh02noscrim rh02current " data-position="0"><div class="rh02w3">
<div class="rh02-pcontent">
<div class="rh02-logo-md">
<h2 class="rh02-ttl">Expanding the Possibilities of Hybrid Cloud with Oracle EVP Clay Magouyrk</h2>
<div class="rh02-cta">
<div class="obttns">
<div><a data-lbl="cta-0209-panelx-pn-olive-hybrid-ondemand" href="https://www.oracle.com/events/live/expanding-possibilities-hybrid-cloud/?source=:ow:o:h:feb:::RC_WWMK201212P00001:Cta_0209_OLiveOCIfeb9OnDemandPanel3&intcmp=:ow:o:h:feb:::RC_WWMK201212P00001:Cta_0209_OLiveOCIfeb9OnDemandPanel3">Watch on demand</a></div>
<div><a data-lbl="cta-0209-panelx-pn-olive-hyrbid-pr-news" href="https://www.oracle.com/news/announcement/oracle-expands-hybrid-cloud-portfolio-with-roving-edge-infrastructure-020921.html?intcmp=OHPpanelx">Oracle Hybrid Cloud news</a></div>
</div>
</div>
</div>
</div>
</div><div class="rh02w2 rh02-slide2 darktheme bgimg rh02noscrim " data-position="1" style=""><div class="rh02w3">
<div class="rh02-pcontent">
<h2 class="rh02-ttl">Oracle ATP recognized in Gartner Critical Capabilities Report</h2>
<div class="rh02-leadin">
<p>Oracle ranked highest in all four Use Cases in Gartner “2020 Critical Capabilities for Cloud Database Management Systems for Operational Use Cases” report.</p>
</div>
<div class="rh02-cta">
<div class="obttns">
<div><a data-lbl="cta-0201-panelx-pn-gart-newcopyandimage-db-crit-caps" href="https://www.oracle.com/database/gartner-dbms.html?intcmp=OHP0201">Read the Gartner report</a></div>
</div>
</div>
</div>
</div>
</div><div class="rh02w2 rh02-slide3 bgimg " data-position="2"><div class="rh02w3">
<div class="rh02-pcontent">
<h2 class="rh02-ttl oserif">From farmer to fork</h2>
<div class="rh02-leadin">
<p>Land O’Lakes relies on Oracle Cloud to power its supply chain.</p>
</div>
<div class="rh02-leadin"> </div>
<div class="rh02-cta">
<div class="obttns">
<div><a data-lbl="cta-0120-panelx-pn-cust-landolakes" href="https://www.oracle.com/customers/land-o-lakes/?intcmp=OHP0120">Learn more</a></div>
</div>
</div>
</div>
</div>
</div><div class="rh02w2 rh02-slide4 darktheme bgimg rh02noscrim " data-position="3"><div class="rh02w3">
<div class="rh02-pcontent">
<h2 class="rh02-ttl rh02-longttl">Try Cloud Free Tier</h2>
<div class="rh02-leadin">
<p>Oracle Cloud Free Tier lets anyone build, test, and deploy applications on Oracle Cloud—for free. Sign up once, get access to two free offers.</p>
</div>
<div class="rh02-cta">
<div class="obttns">
<div><a data-lbl="cta-1030-panelX-free-tier-pn" href="https://www.oracle.com/cloud/free/?source=:ow:o:h:feb::OHPpn1030&intcmp=:ow:o:h:feb::OHPpn1030">Start your trial today</a></div>
</div>
</div>
</div>
</div>
</div><div class="rh02w2 rh02-slide5 darktheme bgimg rh02noscrim " data-position="4"><div class="rh02w3">
<div class="rh02-pcontent">
<h2 class="rh02-ttl rh02-longttl">70,000 people vaccinated in first week</h2>
<div class="rh02-leadin">
<p>Oracle builds Health Management Cloud used for COVID-19 clinical trials in U.S.</p>
<p>Ghana uses the same cloud system to distribute Yellow Fever vaccine</p>
</div>
<div class="rh02-cta">
<div class="obttns">
<div><a data-lbl="cta-1123-panelx-health-covid-pn" href="https://www.oracle.com/corporate/citizenship/health/?intcmp=OHP1123-pn" title="Learn more">Learn more</a></div>
</div>
</div>
</div>
</div>
</div><ul class="rh02nav"><li><a class="rh02cnav" href="#1" title="View Slide 1"><b>View Slide 1</b></a></li><li><a class="o-hf " href="#2" title="View Slide 2"><b>View Slide 2</b></a></li><li><a class="o-hf " href="#3" title="View Slide 3"><b>View Slide 3</b></a></li><li><a class="o-hf " href="#4" title="View Slide 4"><b>View Slide 4</b></a></li><li><a class="o-hf " href="#5" title="View Slide 5"><b>View Slide 5</b></a></li></ul></div></div>
</body>
</html>
Steps to reproduce.
click on first input field or focus first input field using Tab.
press Tab again it will go to next input field
Now If we tab again it goes to child element of parent rc20p3 it should print a console.log. currently it is not showing log
yes focus event is triggered e.relatedTarget gives input field it should give anchor as it goes to that element
console.log(e.relatedTarget.tagName) gives you "INPUT" when you tab to a link from an input box.
Whereas console.log(e.target.tagName); gives you "A" when you tab to a link from an input box.
e.target is probably what you are after.
Not sure if I understand it right, but this might fix your problem.
const parent = document.querySelector('#rc20p3');
const children = Array.from(parent.children);
children.forEach(child => {
child.addEventListener("focusin", () => console.log(" Your Text "))
}

Anchor tag within a bootstrap 3 collapse

I am building a forum using bootstrap 3. when you click the forum subheading it uncollapses and reveals content. I wish for it to go to the anchor tag inside that content. I tried using name and #idhere but it does not work.
Here is a snippet of my code and my fiddle https://jsfiddle.net/mattmega4/e6armed5/embedded/result/
...Some more code up top
<a href="#theFirstPost"><h4 class="theBigCollapse" data-
toggle="collapse">Get your work critiqued
<br><small>stuff ere</small></h4></a>
</td>
<td class="text-center hidden-xs hidden-sm">0</td>
<td class="text-center hidden-xs hidden-sm">0</td>
<td class="hidden-xs hidden-sm">by John Doe
<br><small><i class="fa fa-clock-o"></i> Never</small></td>
</tr>
</tbody>
<div class="col-md-8" name="theFirstPost">
<a name="theFirstPost"></a>
<div id="theFirstPost" name="theFirstPost">
<div class="firstPost">
<div class="postHeading">
<h3>My shot, Banff Pano</h3>
</div>
<div class="postBody">
<p>
Here is a shot of Banff Alberta, Canada.
I took a series of photographs in the portrait orientation
and, using Lightroom and Photoshop, I stitched them together and
adjusted the image to bring out more contrast and colors. The settings
are f/11 at 1/500s; ISO 280.
</p>
<p>
I'm wondering if I should have used a wider aperture and
let the background be a little more blurred
</p>
</div>
<div class="postImage">
<img src="assets/pano.jpg" />
</div>
<div class="postFooter">
<p>
Posted on 7/23/15 at 12:05PM
</p>
</div>
</div>
</div>
</div> <!-- end of 8 -->
My teacher solved my problem, instead of using HTML we used jquery to solve it
$('html, body').animate({
scrollTop: $("#theFirstPost").offset().top
}, 1000)

Creating JQuery div class filter not working

I am trying to make a filter with JQuery that hides all div's and then only shows div's depending on a class inside it called "brand", I managing to get it to hide all div's however it will not show the ones matching the class.
The alert I have added inside the statement is showing so I think it may be something to do with the parent show, has anyone got any ideas?
The html:
<div class="section-link" id="section-tooltip" data-content="Popup with option trigger" rel="popover" data-placement="right" title="" data-original-title="">
<div class="section-features" style="display: none;">
<p><i class="icon-star"></i> protective, waterproof lid</p>
<p><i class="icon-star"></i> enhanced wooden coating</p>
<p><i class="icon-star"></i> long lasting materials</p>
<p><i class="icon-star"></i> 2 year warranty</p>
<p><i class="icon-star"></i> includes durable bag</p>
</div>
<div class="brand tp" style="display: none;"></div>
<div class="price" style="display: none;"> £47.99</div>
<a href="Garden-Games-Picnic-Table-Sandpit-6407.html">
<img src="picnic_table_sandpit.jpg" title="Garden Games Picnic Table Sandpit" alt="Garden Games Picnic Table Sandpit" width="220">
<h3 align="center">Garden Games Picnic Table Sandpit</h3>
<p align="center">
<span> was: £69.99</span>
<span> Now: £47.99</span>
<span class="button">More Info</span>
</p>
</a>
<a name="a6407"></a>
</div>
/\ there are about 20 div's like this with different brand classes example class="brand garden"
The Js:
function brand(string){
var brand = string;
$('.section-link').hide();
if ($('.section-link').children('.brand').hasClass(brand)) {
alert(brand);
$(this).parent().show();
}
}
I am also testing via the chrome url bar javascript: brand("tp");
Any help greatly appreciated,
Simon
You need to use multiple selector here because you need to fetch .brand elements which also have the specified class
function brand(string){
var brand = string;
$('.section-link').hide();
$('.section-link').children('.brand.' + brand).parent().show();
}
Demo: Fiddle

Why wont Click events work for li elements on iOS?

I have a mobile app that I developed using PhoneGap (and html/css/javascript) and there is a part of the app that uses a list and I want to have a click event fire when the li is touched/clicked.
The weird thing is that it works fine when testing in Chrome w/Ripple, works fine on Android and BlackBerry, but in iOS it wont.
You can try out the app here:
Android -- https://market.android.com/details?id=com.viethconsulting.ALIVEapp
iOS -- http://itunes.apple.com/us/app/al!ve-volunteer-engagement/id475428488?ls=1&mt=8
BlackBerry -- Still waiting for App World approval.
If you look at the events calendar (labeled "Events Calendar" in the menu) that the events are listed in a table and have little "expand" buttons to the right.
You'll notice that touching/clicking the rows in the iOS version does nothing (though if you click the heading or the expand icon for each row it will work).
I have no idea why this is the case with iOS and not the other platforms. Any ideas?
Here are some examples of my code:
$(function()
{
$("li.rssRow").live({
click: function(){
if($(this).attr("rel") != "loaded") {
$(this).append('<div><br />Loading Content...<br /></div>');
$(this).children("div:first").load($(this).children(":first").children(":first").attr("rel")+"&mobile_grab=true #mobile_grab");
$(this).attr("rel","loaded");
$(this).children('img:first').rotate({angle:0,animateTo:180});
$(this).children('img:first').attr("rel","180");
}
else {
RotateImage($(this).children('img:first'));
$(this).children('div:first').slideToggle();
}
}
});
// Fix click functionality for calender item contact/map links on iOS devices
$('#span.c_data').live({
click: function() {
window.location = $(this).children("a:first").attr("href");
}
});
});
and the related HTML: (note: this content pulled from a different app, but uses identical code with exception of urls, yet it behaves exactly the same as well).
<div id="body_content" class="rssFeed">
<div class="rssBody">
<ul>
<li class="rssRow odd" rel="loaded">
<h4>Dec 12, 2011: new event</h4>
<img src="assets/img/expand_result.gif" class="expand" rel="0" style="-webkit-transform: rotate(0deg); ">
<p></p>
<div style="display: none; ">
<div id="mobile_grab" style="display:none;">
<div class="c_row">
<span class="c_label">Event Name:</span>
<span class="c_data">new event</span>
</div>
<div class="c_row">
<span class="c_label">Description:</span>
<span class="c_data"></span>
</div>
<div class="c_row">
<span class="c_label">Event Date:</span>
<span class="c_data">12-12-11<br></span>
</div>
<div class="c_row">
<span class="c_label">Event Time:</span>
<span class="c_data"></span>
</div>
<div class="c_row">
<span class="c_label">Location:</span>
<span class="c_data">
Grand Ledge Opera House<br>121 S. Bridge Street<br>Grand Ledge, MI 48837<br><br>
<a target="_blank" href="http://maps.google.com/maps?q=121+S.+Bridge+Street,Grand+Ledge,MI%2048837%20us">click here for Google Maps</a>
</span>
</div>
<div class="c_row">
<span class="c_label">Contact Person:</span>
<span class="c_data"></span>
</div>
<div class="c_row">
<span class="c_label">Event Registration:</span>
<span class="c_data">
<a target="_blank" href="http://mms.anytownbusinessnetwork.org/members/evr/regmenu.php?orgcode=BUSI">Click here to register for events...</a><br>
</span>
</div>
<div class="c_row" style="display:none;">
<span class="c_label">Outlook/vCalendar:</span>
<span class="c_data">click on the date(s) to add to your calendar:<br>12-12-11<br></span>
</div>
<div class="c_row" style="display:none;">
<span class="c_label">Email Reminder:</span>
<span class="c_data">
setup an email reminder for this event
</span>
</div>
</div>
</div>
</li>
<li class="rssRow even">
<h4>Jan 30, 2012: new event</h4>
<img src="assets/img/expand_result.gif" class="expand" rel="0">
<p></p>
</li>
</ul>
</div>
</div>
Thanks in advance for any help you can offer.
Also, this may not be the most efficient approach, so I welcome suggestions for improving the javascript as well. The HTML I can't do a whole lot about though.
I would suggest wrapping your WHOLE LI content into n A element, and manage your click event there - JQuery Mobile does this as well - by using styling you can make sure everything is rendered in order, and it WILL work in ANY browser (mobile/desktop as well), since it's just a standard A tag...
e.g.
<li class="rssRow odd" rel="loaded">
<a href="#" rel="http://mms.anytownbusinessnetwork.org/Calendar/moreinfo.php?eventid=16646" title="View this feed at Anytown Business Network Calendar RSS Feed" target="_blank"><h4>Dec 12, 2011: new event</h4>
<img src="assets/img/expand_result.gif" class="expand" rel="0" style="-webkit-transform: rotate(0deg); ">
......
</a>
</li>
Hope this helps!
cursor:pointer;
Add this style to the li tag.

Toggle a repeated class in jQuery

I have this HTML code:
<div id="content">
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/>
</div>
<div class="container" id="status-#">
<div class="message">
<span class="username">{username} Debugr Rocks!
</div>
<div class="info">24-oct-2010, 14:05 GMT · Comment (5) · Flag · Via Twitter
</div>
<div class="comment_container">
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=32&d=identicon" class="profile_img" alt="{username}"/>
</div>
<div class="comment_message">
<span class="username">{username}</span> Debugr Rocks! XD
</div>
<div class="comment_info">24-oct-2010</div>
</div>
</div>
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/>
</div>
That is repeated two or more times. What I want to do, is to when I click the "Comments (5)" link, the class "comment_container" appears, but only the one in the same "container" class.
It's this possible?
You can use .closest() to go up to the .container then .find() to look inside it, like this:
$(".toggle_comment").click(function() {
$(this).closest(".container").find(".comment_container").show();
});
You can try it here, if you're curious about finding other things relative to this here's a full list of the Tree Traversal functions.
As an aside, there's an error in your HTML that needs correcting, this:
<span class="username">{username} Debugr Rocks! </div>
Should be:
<span class="username">{username} Debugr Rocks! </span>

Categories