Develop Reference

How to access child of parent in jQuery

Trying to get the child of a parent through a child accessor. Basically trying to get the .block__id through the add__block class.
HTML
<div class="col-12">
<span class="block__id">{{$block->id}}</span>
{{$block->title}}
<span class="add__block">+</span>
</div>
jQuery
$(".add__block").click(function(){
$(this).parent().find(function(){
var id = $(".block__id").text();
});
console.log(id);
});
Currently I get id not defined.

Your logic is almost correct, but the issue is that you're providing a function to find() whereas you simply need to use a selector string:
$(".add__block").click(function() {
var id = $(this).parent().find(".block__id").text();
console.log(id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
<span class="block__id">Block #1</span>
Block title
<span class="add__block">+</span>
</div>
<div class="col-12">
<span class="block__id">Block #2</span>
Block title
<span class="add__block">+</span>
</div>

I'm not very familiar with jQuery, but with vanilla Javascript this is very easy:
const blocks = document.querySelectorAll('.add__block');
for (const block of blocks) {
block.addEventListener('click', (e) => {
console.log(e.target.previousElementSibling.textContent)
})
}
<div class="col-12">
<span class="block__id">{{$block->id}}</span>
{{$block->title}}
<span class="add__block">+</span>
</div>

Another alternative is just looking for the sibling with prev method, which might be slightly faster than going to parent and then search from there.
$('.add__block').click(function(){
var id = $(this).prev('.block__id').text();
console.log(id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
<span class="block__id">Block #1</span>
Block title
<span class="add__block">+</span>
</div>
<div class="col-12">
<span class="block__id">Block #2</span>
Block title
<span class="add__block">+</span>
</div>

Can you try like below:
$(".add__block").click(function(){
var id = $(".block__id").text();
console.log(id);
});

On click you can find the parent of the .add__block element and find the relevant .block__id within the parent as follows,
$(".add__block").click(function(){
console.log($(this).parent().find(".block__id").text(););
});

$('.add_block').prevAll('span')

Handling an onclick event inside div tag using selenium java

How do I handle this div using Selenium?
<div onclick="Hover_Menu();Toggle_LevelToolMenu(this,event);"
class="edittop edit-one"></div>
I want to click on this and work with the menu that will be displayed. I believe I will be able to handle the menu that is display, however, I am not able to click on this div.
I tried using
driver.findElement(By.xpath("xpath")).click();
Thought I would use JavascriptExecutor but getElementbyId will not work since this is div and there is no ID associated
Example:
<div style="height:25px; width:55px;">
<div onmouseover="Hover_ToolBarMenu();" class="edit_box">
<div onclick="return Click_ToolBarMenu('Edit',1019, 9189707,event, this)" class="editopt edit">
Edit
</div>
<div onclick="Hover_LivesMenu();Toggle_ToolBarMenu(this,event);" class="editopt edit-dot dot"></div>
</div>
<div class="clr"></div>
<div style="display:none; position:relative;" class="qm_ques_level_menu">
<div onmouseover="Hover_LivesMenu();" onclick="return Click_ToolBarMenu('Delete',1019, 9189707,event, this)" class="menu_buttons img_ico del">
Delete
</div>
<div onmouseover="Hover_LivesMenu();" onclick="return Click_ToolBarMenu('Copy',1019, 9189707,event, this)" class="menu_buttons img_ico copy accor">
Copy <span class="arrowIcon">?</span>
</div>
<div onmouseover="Hover_LivesMenu();" onclick="return Click_ToolBarMenu('Move',1019, 9189707,event, this)" class="menu_buttons img_ico move accor">
Move <span class="arrowIcon">?</span>
</div>
<div onclick="return Click_ToolBarMenu('Deposit2QB',1019, 9189707,event, this)" class="menu_buttons img_ico qb">
Deposit to Bank
</div>
</div>
<div></div>
</div>

http://selenium-python.readthedocs.org/en/latest/locating-elements.html
can you not use CLASS_NAME
driver.find_elements(By.CLASS_NAME, 'edit-one')
or
driver.find_element_by_class_name('edit-one')

Find and click an item from 'onclick' partial value
How about something like this?
driver.find_element_by_css_selector("div[onclick*='Hover_Menu']")

Selenium: How to select nth button using the same class name
How about this one (would required the div to be in a static position)
var nth = 2;
var divs = driver.findElements(By.className("edit-one"));
var div = divs.get(nth);
div.click();

I was able to figure this out. I used jQuery for invoking the onclick function in this div
Below is the jQuery I used
var event = document.createEvent('Event');$('.editopt.edit-dot').get(0).onclick(event)
Thanks everyone who posted and helped me on this.

How to find a particular grand parent by Id and get value of its particular children by certain class using jQuery

I have a dynamic div
<div class="illustartionWrap" id="illustartionWrapId">
<div class="illusList illusListTop" id="illusList_heading">
<span class="fileName">File Name</span>
<span class="fileDesc">Description</span>
<span class="fileSize">File Size</span>
<span class="fileDownload">Download</span>
</div>
<div class="clear"></div>
<div class="illusList">
<span class="fileName">fileTitle</span>
<span class="fileDesc">fileDesc</span>
<span class="fileSize">1.18 MB</span>
<span class="fileDownload">
<a href="http://myfile/file.txt">
<img src="/sites/all/themes/petheme/images/myimage.png">
</a>
<a href="#">
<img id="illFile_6" class="illDeleteFile" src="/sites/all/themes/petheme/images/icons/deleteButton.png">//clicking it to delete the file from db
</a>
</span>
</div>
</div>
How to get the parents of this delete button and find the filetitle class to get the title of the file.
Below is click handler which I wrote
/**delete function for my page**/
jQuery(".illDeleteFile").on("click", function() {
var illDeleteId = jQuery(this).attr("id").split("_");
var illFileTitle = jQuery(this).parent("#illusList").children(".fileName").val();
alert (illFileTitle);
});
I checked with jQuery Parent() , Parents() and children() and also find() but I am getting undefined mostly and not getting the title.
How to achieve this?
JSFIDDLE : http://jsfiddle.net/hiteshbhilai2010/ywhbd9ut/14/

See this,
jQuery(".illDeleteFile").on("click", function() {
var illFileTitle =jQuery(this).closest(".illusList").find(".fileName").html();
alert (illFileTitle);
});

You'll want to use:
var illFileTitle = jQuery(this).closest(".illusList").find(".fileName").text();
alert(illFileTitle);

Jquery find and each selector

I am new to jQuery so please help me with the output.
Below is the HTML code used for reference.
<html>
<body>
<div id="level1">
<p>
<span id="level1.1">
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>
</span>
<span id="level1.2">
<div id="level1.2.1"></div>
<div id="level1.2.2"></div>
</span>
<div id="level1.3"></div>
</p>
</div>
</body>
</html>
When I used following as script
<script type="text/javascript">
$(document).ready(function (){
var div = $("#level1").find("div").each(function(){
alert($(this).attr('id'));
});
});
</script>
The result was 5 alerts with id of each div
But when I used
<script type="text/javascript">
$(document).ready(function(){
var div = $("#level1").find("span > div").each(function(){
alert($(this).attr('id'));
});
});
</script>
There were only two alert for level 1.2.1 and 1.2.2
I was wondering why there was no alert for 1.1.1 and 1.1.2 as they also have span as their parents?
Thanks in advance.
If divs can't be child of
then why is
<p>
<div id="level1">
<span id="level1.1">
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>
</span>
<span id="level1.2">
<div id="level1.2.1"></div>
<div id="level1.2.2"></div>
</span>
<div id="level1.3"></div>
</div>
</p>
Working fine ??

Because of your incorrect HTML.
The browser is going to generate your html as followed.
<p>
<span id="level1.1">
</span>
</p>
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>
Because a div can't be a child of a p
If you remove the first <p> in your code, you wil get an alert of the 4 levels sub levels.

divs cannot be children of p in HTML
Change your HTML markup with the following:
<div id="level1">
<span id="level1.1">
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>
</span>
<span id="level1.2">
<div id="level1.2.1"></div>
<div id="level1.2.2"></div>
</span>
<div id="level1.3"></div>
</div>
and you should yield the expected results !

Because your HTML structure is not correct this how your structure is populated :

.find() method only travels a single level down the DOM tree.
Here you can find it.
The .find() and .children() methods are similar, except that the .find() method only travels a single level down the DOM tree.

jQuery Use the text of an element to toggle another element that contains the same text?

I'm extremely new to jquery and I've been struggling to create this action. Any help in this matter will be greatly appreciated.
I need a way in jquery that allows a user to click a span and toggle (i.e .toggle()) another div that contains the same text as the span being clicked, without having to repeat the same function for each individual span.
My example:
<ul>
<li class="sub">
<div class="filter-row">
<div class="row-section">
<div class="row-heading">art</div>
<span class="label studio-art">studio art</span>
<span class="label ceramics">ceramics</span>
</div>
</div>
</div>
</li>
<li class="sub">
<div class="filter-row">
<div class="row-section">
<div class="row-heading">studio art</div>
<span class="label">Option 1</span>
<span class="label">Option 2</span>
</div>
<div class="row-section">
<div class="row-heading">ceramics</div>
<span class="label">Option 1</span>
<span class="label">Option 2</span>
</div>
</div>
</li>
</ul>
If a user were to click the span that contains "studio art", then I want the div that contains "studio art" to ".toggle()". I do know that I could give a unique class such as ".studio-art" to the span and div that i want to connect together, such as:
$(document).ready(function(){
$("span.label.studio-art").click(function(){
$(".row-section.studio-art").toggle();
});
$("span.label.ceramics").click(function(){
$(".row-section.ceramics").toggle();
});
});
Jsfiddle example: http://jsfiddle.net/KCRUSHER/6qLX7/
But I want to avoid doing what I have above since I may have hundreds of spans or instances like this.
So basically I'm hoping for help to create a solution that only needs the string in a span to match the string in my "row-heading" div. So that when a span is clicked the row-section div will toggle.
Thank you for any help in advance.

You can find all other div elements with the same text by using jQuery's filter method and toggle them. You'll have to pick your class names more sensibly to make sense and easier to understand.
$(document).ready(function(){
$(".row-section span").click(function(){
var clickedText = $(this).text();
$(".row-section").filter(function(){
return $(this).find("div").text() === clickedText;
}).toggle();
});
});
Updated fiddle: http://jsfiddle.net/6qLX7/2/
.filter documentation: http://api.jquery.com/filter/

I didn't test this, but it should work.
$(document).ready(function(){
$("span.label").click(function(){
var checkText = $(this).html();
$( ".row-section:contains('"+checkText+"')" ).each(function(index,element){
// This checks for exact match. If you want any "containing" match, remove the if-clause
if($(element).html() == checkText) {
$(element).toggle();
}
});
});
});
Let me know if this helps. P.S.! This function IS case-sensitive (see http://api.jquery.com/contains-selector/ for more details.)