Getting the parent span title value from child node using Javascript or jQuery

Question

I am reconstructing this question. I have the following HTML element structure.

<li class="inner"><span class="plus" id="sidehome" title="siteHome">SiteHome</span>
<ul style="display:none">
  <li class="inner">
    <span class="plus" id="Middle_Content">Middle content</span>
    <ul style="display:none">
      <li>
        <span id="editedpart" title="first div">
          <form >
            <input type="hidden" value="1/middle_content/first_div" name="page_heri" id="t_div" class="" />
            <input type="hidden" name="editedpart" value="first div" id="edited" />
            <a href="#" title="edit" id="edit" onclick="showeditpage()">first div</a>
          </form>
        </span>
      </li>
      <li>
        <span id="editedpart" title="second div">
          <form>
            <input type="hidden" value="1/middle_content/first_div" name="page_heri" id="t_div" class="" />
            <input type="hidden" name="editedpart" value="second div" id="edited" />
            <a href="#" title="edit" id="edit" onclick="showeditpage()">second div</a>
          </form>
        </span>
      </li>
      <li>
        <span id="editedpart" title="third div">
          <form>
            <input type="hidden" value="1/middle_content/first_div" name="page_heri" id="t_div" class="" />
            <input type="hidden" name="editedpart" value="third div" id="edited" />
            <a href="#" title="edit" id="edit" onclick="showeditpage()">third div</a>
          </form>
        </span>
      </li>
    </ul>
  </li>

I want to be able to get title value of <span> with id=editedpart, which is the immediate parent of the <a> tag when the link is clicked. I don't know how to explain it more. I will appreciate it if someone can help. Thanks.

I used his jQuery code var parent = $(this).closest("span");

Here is my full showeditpage()

function showeditpage(){
var page = document.getElementById("t_div").value;
var action = document.getElementById("edit").title;

var parent = $(this).closest("span[id='editedpart']");
var str =parent.attr('title');
if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            document.getElementById("pcontent").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","../views/edit.php?page="+page+"&action="+action+"&editedpart="+str);
    xmlhttp.send();

}

it is not working that is it is not responding.

Answer 1

You need to pass the clicked element to the handler method onclick="showeditpage(this)".

Also, ID has to be unique in a page, ie only one element should have a given id. In your case I would suggest you to make editedpart as a class instead of id and access the title using var parent = $(this).closest(".editedpart");. Also you need to change the ids t_div and edit to classes.

Also you can modify the method to use jQuery

HTML

<li class="inner"><span class="plus" id="sidehome" title="siteHome">SiteHome</span>
<ul style="display:none">
  <li class="inner">
    <span class="plus" id="Middle_Content">Middle content</span>
    <ul style="display:none">
      <li>
        <span class="editedpart" title="first div">
          <form >
            <input type="hidden" value="1/middle_content/first_div" name="page_heri" class="t_div" />
            <input type="hidden" name="editedpart" value="first div" id="edited" />
            <a href="#" title="edit" class="edit" >first div</a>
          </form>
        </span>
      </li>
      <li>
        <span class="editedpart" title="second div">
          <form>
            <input type="hidden" value="1/middle_content/first_div" name="page_heri" class="t_div" />
            <input type="hidden" name="editedpart" value="second div" id="edited" />
            <a href="#" title="edit" class="edit" >second div</a>
          </form>
        </span>
      </li>
      <li>
        <span class="editedpart" title="third div">
          <form>
            <input type="hidden" value="1/middle_content/first_div" name="page_heri" class="t_div" />
            <input type="hidden" name="editedpart" value="third div" id="edited" />
            <a href="#" title="edit" class="edit" >third div</a>
          </form>
        </span>
      </li>
    </ul>
  </li>

Script

$(function(){
    $('.editedpart .edit').click(function(){
        var parent = $(this).closest(".editedpart");

        var action = $(this).attr('title');
        var str = parent.attr('title');
        var page = parent.find('.t_div').val();

        $('#pcontent').load('../views/edit.php', {
            page: page,
            action: action,
            editedpart: str
        })
    })

})

Answer 2

Your issue is that this doesn't reference the clicked a element in the showeditpage function.

Altough I dont recommend it, you can fix your issue using the following approach:

<a onclick="showeditpage(this);" ...

function showeditpage(link) {
    alert($(link).closest("span").attr('title'));
}

However, you should avoid attaching event handlers using attributes and use the approach below:

Put a class on your a tags, like edit for instance (you could also use any other shared attributes, if any).

<a class="edit" ...

Wait until the document is ready and attach event handlers using jQuery.

$(function () {
    $(document).on('click', '.edit', function (e) {
        alert($(this).closest("span").attr('title'));
        e.preventDefault(); //prevent default browser action
    });
});

Please also note that id should be unique.

Answer 3

Simple:

 var parent = $(this).closest("span[id='editedpart']");
 var title = parent.attr('title');

Answer 4

You could use .attr method:

var title = $(this).closest("span").attr('title');