如何使用jQuery选择器和JavaScript选择特定的HTML节点？

Question

我有以下html表：

<tbody>
   <tr>
      <td class="rich-tabpanel-content">
         <table>
            <tbody>
               <tr>
                  <td>
                     <span class="bold">Overview</span>
                  </td>
               </tr>
               <tr>
                  <td>
                     <input class="titleInput" type="text"></input>
                  </td>
               </tr>
               <tr>
                  <td>
                     <span class="bold">Shorttext</span>
                  </td>
               </tr>
               <tr>
                  <td>
                     <textarea class="shorttextInput"></textarea>
                  </td>
               </tr>
               <tr>
                  <td>
                     <span class="bold">Longtext</span>
                  </td>
               </tr>
               <tr>
                  <td>
                     <textarea class="longtextInput"></textarea>
                  </td>
               </tr>
           </tbody>
        </table>
     </td>
   </tr>
</tbody>

现在我想在DOM中选择这些标签：

<span class="bold">Overview</span>
<span class="bold">Shorttext</span>
<span class="bold">Longtext</span>

我已经编写了以下这些行的JQuery和Java脚本代码来更改这些HTML标记的值，但是命令

"jQuery(value).parent().prev();" 

在DOM中没有选择正确的html标签：

jQuery('.titleInput').each(function(index, value) {
selectAndExpand(value);
}

function selectAndExpand(value) {
var captionCell = jQuery(value).parent().prev();
captionCell.empty();
var newCaption = '<span class="bold">' + "HERE IS MY NEW INPUTVALUE" + '</span>';
captionCell.append(newCaption);
};

我怎么解决这个问题？

从节点进行导航非常重要

<textarea class="longtextInput"></textarea>

至

<span class="bold">Longtext</span>

或来自

<input class="titleInput" type="text"></input>

至

<span class="bold">Overview</span>

Answer 1

采用：

$('.bold').each(function(){
$(this).html("HERE IS MY NEW INPUTVALUE")
});

工作小提琴

Answer 2

在您的情况下使用类选择器 ，使用$('.bold')选择span类为bold ，您可以像$('.bold').parent('tr').next().find('.bold');一样轻松导航至上 一个和下一个 $('.bold').parent('tr').next().find('.bold'); 并将粗体类赋予您的输入元素，以便我们轻松导航。

Answer 3

您可以按类名选择它们（当类名相同时，在您的情况下为“粗体”）：

$(".bold");

要在它们之后选择所有文本区域并将值设置为这些“粗体”-元素使用

var spans = $(".bold");

$.each(spans, function(index, item) {
    var spanTd = $(item).closest("tr");
    var value = $(spanTd).next().find("textarea").val();
    if (value === undefined) { //if there aren't textarea - get textbox.
          value = $(spanTd).next().find("input[type='text']").val();
    }
    $(item).html(value);
});

编辑：演示-http: //jsfiddle.net/h9fpy/

Answer 4

使用Javascript：

var elements = document.getElementsByClassName('bold');
console.log(elements[0]);
console.log(elements[1]);
console.log(elements[2]);

使用jQuery：

var elements = $('.bold');
console.log(elements[0]);
console.log(elements[1]);
console.log(elements[2]);

要么...

console.log($('td:contains("Overview")'));
console.log($('td:contains("Shorttext")'));
console.log($('td:contains("Longtext")'));

干杯。