Hide main div in which sub div contains specific text - html

I'm trying to make my first Tampermoney script
Here's an example of an html page :
<div class="a">
<div class="b">
"Hello world"
</div>
<div class="n">
"Test"
</div>
</div>
<div class="a">
<div class="d">
<div class="e">
...
<div class="n">
"Hello world"
</div>
</div>
</div>
</div>
I found this topic, very interesting, but I'm not able to make it fits my requirements : Hiding div that contains specific string
I would like to hide the divs class="a" ONLY if it contains a div class="n" that contains the text "Hello world".
Do I need to loop on all the divs class="a", to seek for a class="n" containing "Hello world" ? I'll need some help please...
<div class="a">
<div class="b">
"Hello world"
</div>
<div class="n">
"Test"
</div>
</div>

Hmmmm, I think it needs a few ajustements...
Here's my code :
$(window).load(function(){
$('._5g-l:contains("Publication suggérée")').closest('._5jmm _5pat _3lb4 m_95yeui-j _x72').hide();
});
The web page :
And the associated code :
<div data-fte="1" data-ftr="1" class="_5jmm _5pat _3lb4 m_95yeui-j _x72" id="hyperfeed_story_id_581d0a6f0b12a3832990101" data-testid="fbfeed_story" [...]>
<div class="_4-u2 mbm _5v3q _4-u8" id="u_jsonp_2_1f">
<div class="_3ccb _4-u8" [...]>
<div></div>
<div class="userContentWrapper _5pcr" role="article" aria-label="Actualité">
<div class="_1dwg _1w_m">
<div class="_5g-l"><span>Publication suggérée</span></div>
[...]
Also, I can't put in the webpage :
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
When I try to execute the commande in the console :
$('._5g-l:contains("Publication suggérée")').closest('._5jmm _5pat _3lb4 m_95yeui-j _x72').hide();
(unknown) Uncaught Error: <![EX[["Tried to get element with id of \"%s\" but it is not present on the page.","._5g-l:contains(\"Publication suggérée\")"]]]>
at h (https://www.facebook.com/rsrc.php/v3/yZ/r/AveNRnydIl_.js:36:166)
at i (https://www.facebook.com/rsrc.php/v3/yZ/r/AveNRnydIl_.js:36:293)
at <anonymous>:1:1

I think this will help you. And you want if class .a contain .n with text("hello world") , .a need to be hide. I just make edit your HTML part and also comment out which div will be hide. According to your HTML first one will be not hide because .n contain "test".
if any question or if you found anything wrong on my answer ask me. :) Live On Fiddle
UPDATE: In your Code the problem in your parent div you have 5 class _5jmm, _5pat, _3lb4, m_95yeui-j, _x72 but you write in jQuery closest('.5jmm _5pat _3lb4 m_95yeui-j _x72').hide(). So you can set only one class which is closest. And you don't
$(window).on('load', function() {
$('._5g-l:contains("Publication suggérée")').closest('._5jmm').hide();
});
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div data-fte="1" data-ftr="1" class="_5jmm _5pat _3lb4 m_95yeui-j _x72" id="hyperfeed_story_id_581d0a6f0b12a3832990101" data-testid="fbfeed_story" [...]>
<div class="_4-u2 mbm _5v3q _4-u8" id="u_jsonp_2_1f">
<div class="_3ccb _4-u8" [...]>
<div></div>
<div class="userContentWrapper _5pcr" role="article" aria-label="Actualité">
<div class="_1dwg _1w_m">
<div class="_5g-l"><span>Publication suggérée</span></div>
</div>
</div>
</div>
</div>
</div>

Related

Traversing the DOM with querySelector

I'm using the statement document.querySelector("[data-testid='people-menu'] div:nth-child(4)") in the console to give me the below HTML snippet:
<div>
<span class="jss1">
<div class="jss2">
<p class="jss3">Owner</p>
</div>
</span>
<div class="jss4">
<div class="5" title="User Title">
<p class="jss6">UT</p>
</div>
<div class="jss7">
<p class="jss82">User Title</p>
<span class="jss9">Project Manager</span>
</div>
</div>
</div>
I'd like to extend the statement in the console to extract the title "User Title" but can't figure out what combination of nth-child or nextSibling (or something else) to use. The closest I've gotten is:
document.querySelector("[data-testid='people-menu'] div:nth-child(4) span:nth-child(1)")
which gives me the span with class jss1.
I expected document.querySelector("[data-testid='people-menu'] div:nth-child(4) span:nth-child(1).nextSibling") to give me the div with class jss4, but it returns null.
I can't use class selectors because those are generated dynamically at build.
Why not just add [title] onto your querySelector?
document.querySelector("[data-testid='people-menu'] div:nth-child(4) [title]")
You can then get whatever you are looking for from that section? This is assuming title will be unique attribute in this section of html

jQuery - Insert text inside element of a HTML string

I store an html string into var HTML, which I get using the following:
var HTML = $('.group').get(0).outerHTML;
The output of HTML using console.log(HTML) is:
<div class="group">
<div class="class1">
Data123...
</div>
<div class="class2">
<!--I want to insert text here -->
</div>
</div>
Now, I want to insert some text inside the div class="class2". I am using the following code:
$(HTML).find('.class2').text("Hello!");
But now the output of HTML using console.log(HTML) is the same old HTML as before. The text "Hello!" did not get inserted. Can anyone help with the solution.
Here is the complete code:
<div class="group">
<div class="class1">
Data123...
</div>
<div class="class2">
</div>
</div>
<script type="text/javascript">
var HTML = $('.group').get(0).outerHTML;
$(HTML).find('.class2').text("Hello!");
console.log(HTML);
</script>
You're updating a temporary DOM element, but that doesn't change the HTML string. You need to save the DOM elements in a variable.
var new_div = $(HTML);
new_div.find('.class2').text("Hello!");
console.log($(new_div).html());

XPath: Get next after following sibling

In the following HTML code I need to extract class="list-item-child-label ng-inserted" but only in that part where I have class="fat-checkbox-checked"
<fat-option class="fat-option>
<fat-pseudo-checkbox class="fat-pseudo-checkbox ></fat-pseudo-checkbox>
<span class="fat-option-text">
<div class="justify-content">
<div class="align-items">
<fat-checkbox class="fat-checkbox-checked">
</fat-checkbox>
<div></div>
<div class="list-item-child-label"> TEXT AAA </div>
</div>
<div class="list-item-child-label ng-inserted"> TEXT BBB </div>
</div>
</span>
</fat-option>
<fat-option class="fat-option>
<fat-pseudo-checkbox class="fat-pseudo-checkbox ></fat-pseudo-checkbox>
<span class="fat-option-text">
<div class="justify-content">
<div class="align-items">
<fat-checkbox class="fat-checkbox">
</fat-checkbox>
<div></div>
<div class="list-item-child-label"> TEXT AAA </div>
</div>
<div class="list-item-child-label ng-inserted"> TEXT BBB </div>
</div>
</span>
</fat-option>
These xpaths that I tried to build:
'//div[contains(#class, "list-item-child-label ng-inserted")]/ancestor::span//div//fat-checkbox[contains(#class, "mat-checkbox-checked")]'
'//span//div//fat-checkbox[contains(#class, "fat-checkbox-checked")]/following-sibling::div[2]'
'//span//div//fat-checkbox[contains(#class, "fat-checkbox-checked")]/following-sibling::div[contains(#class, "list-item-child-label ng-inserted")]'
getting me only class="list-item-child-label"
Anyone knows how to build correct xpath to get class="list-item-child-label ng-inserted" with class="fat-checkbox-checked" without using contains(#text)?
Try below XPath to select required node
//div[fat-checkbox[#class="fat-checkbox-checked"]]/following-sibling::div[#class="list-item-child-label ng-inserted"]
To locate the element <div class="list-item-child-label ng-inserted"> followed by the element <fat-checkbox class="fat-checkbox-checked"> you can use either of the following xpath:
//fat-checkbox[#class='fat-checkbox-checked']//following::div[#class='list-item-child-label ng-inserted']

How to get Nokogiri to scrape text from span in Ruby

I'm trying to scrape information from a website using Nokogiri and Curb, but I can't seem to find the right name/ to find where to scrape. I'm trying to scrape the API key, which is at the bottom of the HTML code as "xxxxxxx".
The HTML code is:
<body class="html not-front logged-in no-sidebars page-app page-app- page-app-8383900 page-app-keys i18n-en" data-twttr-rendered="true">
<div id="skip-link"></div>
<div id="page-wrapper">
<!--
Code for the global nav
-->
<nav id="globalnav" class="without-subnav"></nav>
<nav id="subnav"></nav>
<section id="hero" class="hero-short"></section>
<section id="gaz-content">
<div class="container">
::before
<div id="messages"></div>
<div id="gaz-content-wrap-outer" class="row">
::before
<div id="gaz-content-wrap-inner" class="span12">
<div class="row">
::before
<div class="article-wrap span12">
<article id="gaz-content-body" class="content">
<header></header>
<div class="header-action"></div>
<div class="tabs"></div>
lass="d-block d-block-system g-main">
<div class="app-details">
<h2>
Application Settings
</h2>
<div class="description"></div>
<div class="app-settings">
<div class="row">
::before
<span class="heading">
Consumer Key (API Key)
</span>
<span>
xxxxxxxxx
</span>
All I can seem to get is the "content" text.
My code looks like:
consumer = html.at("#gaz-content-body")['class']
puts consumer
I'm not sure what to type to select the class and/or span then the input text. All I can get is Nokogiri to put "content".
In this case we need to find the second span after the span class="heading", and inside the div class="app-settings" - I'm being a bit general but not too much. I'm using search instead of at to retrieve the two spans and get the second one:
# Gets the 2 span elements under <div class='app-settings'>.
res = html.search('#gaz-content-body .app-settings span')
# Use .text to get the contents of the 2nd element.
res[1].text.strip
# => "xxxxxxxx"
But you can also use at to target the same:
res = html.at("#gaz-content-body .app-settings span:nth-child(2)")
res.text.strip
# => "xxxxxxxx"

Pass variable from link to div

I have a pure css3 modal call by a link, and I wish to pass some variable to the modal.
Modal
<div id="reasonmodal">
<div class="modal-content">
<div class="header">
Reason
</div>
<div class="copy">
//content
</div>
<div class="footer">Close</div>
<br />
</div>
HTML
//some other code with foreach appid
Click
I want pass foreach appid to the modal, any suggestion to do that ? Thanks
i have an idea (js only):
<a href="#reasonmodal" class="modal-link" rel="<?=$app_id?>" >Click</a>
Close
and modal action :
$(".modal-link").click(function(){
$("#submit-link").attr('href','?r=Register/UpdateReason&appid='+$(this).attr('rel'));
$($(this).attr('href')).modal('show');
});
Just print the var
<div id="reasonmodal">
<div class="modal-content">
<div class="header">
Reason
</div>
<div class="copy">
//content
</div>
<div class="footer">Close</div>
<br />
</div>
I see that you want to dynamically pass variables to the model each time click the html div.
Just use ajax post to get these values and update the modal content before it is triggered
Modal
<div id="reasonmodal">
<div class="modal-content">
<div class="header">
Reason
</div>
<div class="copy" id="modal_content">
//content
</div>
<div class="footer">Close</div>
<br />
</div>
Add a onclick event to html div
<a href="#reasonmodal" onlick='updateModal()'>Click</a>
Implement the updateModal() function which will POST an ajax request to get data. Something like this:
function viewDetail()
{
$.ajax({
type: "POST",
url: <?php echo "\"" . Yii::app()->createUrl('controller/action') . "\""; ?>,
data: { param : "value"},
}).done(function(msg){
//update the model content with msg responded from server
document.getElementById("modal_content").innerHTML = msg;
});
}
The modal will be triggered after the html content is updated.
(Give me a vote-up if it works for you)