使用JQuery获取DT和DD元素的内容

Question

我试图通过单击链接来获取字典术语（DT）及其字典定义（DD）的内容。

到目前为止已采取的步骤：

1. 将链接的数据跟踪属性设置为DT id
2. 构造选择器
3. 到目前为止，使用选择器使DT成功，但是...
4. 更新选择器以获取DD

这是失败的地方：使用更新的选择器的步骤不会返回Dictionary Definition的内容尝试使用“ dd”，“ dd：first”和“ dd：nth-​​child（1）”构造选择器
并更改为“ var definition = $（defSelector）.text（）;” 到“ ... val（）”和“ ..html（）”，但这些都不起作用。

如果您可以确定并解释解决方案，请告诉我。

 $('.help-lookup').click(function(){ // get this data-target var target = $(this).data("target"); alert('data target = ' + target); //create # + DT selector with target value selector = ('#'+target); alert('selector= '+ selector); //get tile var title = $(selector).html(); //title = $(this).text( title ); alert (title); // create DD selector var defSelector = (selector+' dd:first'); alert(defSelector); //get definition var definition = $(defSelector).text(); alert(definition); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <p> Goal: clicking "look up" returns html contents of DT and DL<br/> Expect: final alert to display: "Definition text"<br/> Actual: final alert displays "" </p> <a href="#" data-target="TermToLookUp" class="help-lookup">look up</a> <dl> <dt id="TermToLookUp" class="anchor">Term</dt> <dd>Defintion text</dd> </dl> 

Answer 1

(selector+' dd:first')是错误的。 您正在尝试获取selector （ #TermToLookUp ）旁边的元素的文本。 因此，请使用.next()方法。

 $('.help-lookup').click(function(){ // get this data-target var target = $(this).data("target"); alert('data target = ' + target); //create # + DT selector with target value selector = ('#'+target); alert('selector= '+ selector); //get tile var title = $(selector).html(); //title = $(this).text( title ); alert (title); // create DD selector var defSelector = $(selector).next("dd"); // Change here alert(defSelector); //get definition var definition = defSelector.text(); // Change here alert(definition); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <p> Goal: clicking "look up" returns html contents of DT and DL<br/> Expect: final alert to display: "Definition text"<br/> Actual: final alert displays "" </p> <a href="#" data-target="TermToLookUp" class="help-lookup">look up</a> <dl> <dt id="TermToLookUp" class="anchor">Term</dt> <dd>Defintion text</dd> </dl> 

Answer 2

dd元素不是孩子，而是dt的兄弟姐妹。 因此，您的选择器需要

$(selector).next('dd')