Question

我有一些HTML（注意这个HTML块会随着内部数据的变化而重复）：

            <div class="memberDiv" style="position:relative">
                <p class="myUserName"><strong>Jo Bloggs</strong></p>
                <p class="myJobTitle">Widget Maker</p>
                <p class="myCountry">England</p>
                <button class="memberMore">MORE INFORMATION</button>
            </div>

我在java中尝试做的是从div内部获取实际值（即Jo Bloggs，Widget Maker，England）

这是我认为可行的：

$(".memberMore ").click(function (e) {
    e.preventDefault();
    //Get the 'parent' div (memberDiv)
    var myDiv = $(this).closest("div");
    alert($(myDiv).next(".myUserName").text());
    return false;
});

但警告框显示未定义的＆＃39;错误。

有人可以免费让我5分钟向我展示我的方式错误吗？

感谢，克雷格

Answer 1

使用find()代替

＆＃13;

$(".memberMore ").click(function(e) {
  e.preventDefault();
  //Get the 'parent' div (memberDiv)
  var myDiv = $(this).closest("div");
  console.log($(myDiv).find(".myUserName").text());
  return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="memberDiv" style="position:relative">
  <p class="myUserName"><strong>Jo Bloggs</strong>
  </p>
  <p class="myJobTitle">Widget Maker</p>
  <p class="myCountry">England</p>
  <button class="memberMore">MORE INFORMATION</button>

＆＃13;

Answer 2

Try this
$(".memberMore ").click(function (e) {
    e.preventDefault();        
    alert($(this).find(".myUserName").text());
    return false;
});

Answer 3

你应该是兄弟姐妹＆＃34;功能，而不是＆＃34;发现＆＃34;，像这样：

$(".memberMore ").click(function (e) {
    e.preventDefault();        
    alert($(this).siblings(".myUserName").text());
    return false;
});

Fiddle here

Answer 4

要返回该div中的所有段落，请循环显示它们：

$(".memberMore ").click(function(e) {
  e.preventDefault();
  //Get the 'parent' div (memberDiv)
  var myDiv = $(this).closest("div");
  var txtReturn = '';
  myDiv.find('p').each(function(index) {
    if (index>0) {
      txtReturn += ', '
    }
    txtReturn += $(this).text()
  });
  alert(txtReturn);
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="memberDiv" style="position:relative">
  <p class="myUserName"><strong>Jo Bloggs</strong></p>
  <p class="myJobTitle">Widget Maker</p>
  <p class="myCountry">England</p>
  <button class="memberMore">MORE INFORMATION</button>
</div>

或者你可以通过将按钮移出div，和/或将其更改为input type="button"（因此它没有内部文本）来使其更容易。

$(".memberMore").click(function(e) {
  e.preventDefault();
  //Get the 'parent' div (memberDiv)
  var myDiv = $(this).prev("div");
  alert(myDiv.text());
  return false;
});
$(".memberMore2").click(function(e) {
  e.preventDefault();
  //Get the 'parent' div (memberDiv)
  var myDiv = $(this).closest("div");
  alert(myDiv.text());
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="memberDiv" style="position:relative">
  <p class="myUserName"><strong>Jo Bloggs</strong></p>
  <p class="myJobTitle">Widget Maker</p>
  <p class="myCountry">England</p>
  <input type="button" class="memberMore2" value="MORE INFORMATION" />
</div>
<button class="memberMore">MORE INFORMATION</button>

Answer 5

您还可以使用siblings()函数获取所有元素的文本。如果你需要获取字符串

$('.memberMore').on('click', function() { var text = $(this).siblings().map(function() { return $(this).text(); }).get().join(', '); alert(text); });

你可以这样做：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="memberDiv" style="position:relative">
  <p class="myUserName"><strong>Jo Bloggs</strong></p>
  <p class="myJobTitle">Widget Maker</p>
  <p class="myCountry">England</p>
  <button class="memberMore">MORE INFORMATION</button>
</div>

Answer 6

如果您想显示所有p的文字，可以尝试以下内容：

$(".memberMore ").click(function(e) {
  e.preventDefault();

  $(this).parent().find('p').each(function(index, elemt){
     console.log($(elemt).text());
  });

  return false;
});

这里的关键是parent()方法。

获取父Div，然后获取内部元素

6 个答案: