Question

我正在重建这个问题。我有以下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 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>

我希望能够获得<span＆gt;的标题值使用id=editedpart，这是单击链接时<a>标记的直接父级。我不知道如何解释它。如果有人可以提供帮助，我将不胜感激。感谢。

我使用了他的jQuery代码var parent = $(this).closest("span");

这是我的完整showitpage（）

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();

}

它不起作用，因为它没有响应。

Answer 1

您可以使用.attr方法：

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

Answer 2

您的问题是this未引用a函数中点击的showeditpage元素。

Altough我不推荐它，您可以使用以下方法解决您的问题：

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

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

但是，您应该避免使用属性附加事件处理程序并使用以下方法：

在a代码上添加课程，例如edit（您也可以使用任何其他共享属性，如果有的话）。

<a class="edit" ...

等到document准备好并使用jQuery附加事件处理程序。

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

请注意id应该是唯一的。

Answer 3

简单：

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

Answer 4

您需要将单击的元素传递给处理程序方法onclick="showeditpage(this)"。

此外，ID必须在页面中是唯一的，即只有一个元素应该具有给定的id。在您的情况下，我建议您将editedpart作为一个类而不是ID，并使用var parent = $(this).closest(".editedpart");访问该标题。您还需要将ID t_div和edit更改为类。

您也可以修改方法以使用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>

脚本

$(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
        })
    })

})

使用Javascript或jQuery从子节点获取父span标题值

4 个答案: