Question

假设我的HTML看起来像这样：

<div>
    <div>
        <div class="calendar start">

        </div>     
    </div>
    <div>
        <div class="calendar end">

        </div>     
    </div>    
</div>

我们可以假设start和end将始终位于相同的＆＃34;级别＆＃34;相互之间的分支，并在某些时候共享一个共同的父母。

如果不了解确切的HTML结构，我如何从calendar end找到calendar start？如果他们进一步嵌套怎么办？

修改：澄清一下。我想从start的父母那里开始。搜索end的所有子元素。然后移动到下一个父级，并搜索所有子元素......等，直到找到end。我想知道这是否可以使用内置的JQuery函数，而无需编写自己的DOM遍历逻辑。

Answer 1

你可以像下面这样做，但这是一个更昂贵的过程。

 var parentWhichHasCalEnd = 
         $($(".calendar.start").parents()
                   .get().find(itm => $(itm).find(".calendar.end").length));
 var calEnd = $(".calendar.end", parentWhichHasCalEnd);

DEMO

说明：我们首先选择.start元素，然后检索其父元素。之后，我们使用.get()将该jquery对象集合转换为元素数组。这样我们就可以使用.find()，一个数组函数。现在在find的callBack内部，我们正在.end的每个父元素上检查.start，如果父级有.end，那么我们将返回该父级。多数民众赞成。

如果您阅读.get()，.find()和arrow functions，您可以获得更多理解。

Answer 2

我不知道我是否做对了，但你试过jquery中的儿童功能

 $( ".calender" ).children( ".end" )

并且对于父级，您可以使用parent（）函数，这样您就可以先检查父级，然后检查子级或者vicversa

编辑：如果你不知道确切的结构，更好的方法是找到共同的父母，然后搜索它的孩子：

 $( ".calender.start").closest('.common-parent').children('.calender.end');

最近的函数给出最近的父

Answer 3

您可以使用.start父元素

中的

var startSelector = $('body > div > div:nth-child(3) > .start')
var endSelector = secondStart.parent().next().find('.end');

方法

jQuery#children()

我认为这种方法比"INSERT INTO MemberDetails (datetime, phone, code, address, stuid, birthdate, num, name, pass, dept, year, sec) VALUES (" + "'2016-2020','" + PhoneNum + "','VEC','" + Address + "','" + StuID + "','" +DOB +"','1000','" + Name + "','" + Pass + "','" + dept + "','" + year + "','" +sec + "')"方法更快，但如果你想

，你可以对它进行基准测试

顺便说一句，你可以根据this JSBin

查看我的答案

Answer 4

尝试：

$('.start').parent().parent().find('.end');

JQuery如何找到既不是当前元素的父元素也不是子元素的最接近元素？

4 个答案:

DEMO