如何获取此相邻元素中的值？

Question

我在 jQuery 部分遇到问题：

HTML

<div>
xxxxxxxxx
    <div>
        <ul>
            <li><button class="addnum">xxxx</button></li>
        </ul>
    </div>              
</div>

<div class="num">
    12345
</div>

脚本

$(".addnum").click(function() {
    var pur = $(this).siblings(".num").clone();
});

我正在尝试克隆“.num”中的值，即 12345。我应该怎么select呢？

*编辑：抱歉，我没有提到我有多个“.num”元素，而且我一次只能克隆 1 个，每个 num 中有不同的值，我需要能够 select 他们单独。不过谢谢大家的回答！

Answer 1

尝试 closest()、next() 和 parent()：

var num =$(this).closest('div').parent().next(".num").text();

工作原理：

<div><!-- parent of closest div of `.addnum` -->
    xxxxxxxxx
    <div><!-- closest div of `.addnum` -->
        <ul>
            <li>
              <button class="addnum">xxxx</button>
            </li>
        </ul>
    </div>               </div>
<!-- next `.num` to parent of closest div of `.addnum` -->
<div class="num">12345</div>

Answer 2

只需使用 $("div.num")，如果您的目标元素具有唯一的 class 或 ID，则无需使用复杂的选择器导航 DOM。

Answer 3

@Arvind，代码应该可以工作。

但是我建议您将 HTML 包装在一个容器中，然后使用 .closest() and .find() 的组合以获得更好的可维护性。

 var pur = $(this).closest('.container').find(".num").text();

$(document).ready(function() {
  $(".addnum").click(function() {
    var pur = $(this).closest('.container').find(".num").text();
    alert(pur)
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div>
    xxxxxxxxx
    <div>
      <ul>
        <li>
          <button class="addnum">xxxx</button>
        </li>
      </ul>
    </div>
  </div>

  <div class="num">
    12345
  </div>

</div>

Answer 4

按钮没有兄弟，它在 UL 和 DIV 元素中。您可以求助于向上移动 DOM 层次结构（使用 parent() 方法，一旦到达正确的级别，您 select 具有 class .num

的元素

var num =$('.addnum').parent().parent().parent().parent().children().children('.num').text();

那应该给你 div 里面的文字。

如何获取此相邻元素中的值？

How do I get the value in this neighboring element?

jquery

jquery-selectors