javascript - 仅定位带有文本的最后一级元素

Question

我正在尝试将 tabindex="0" 应用于一组元素:

• 其中有文字
• 仍然没有 tabindex。

这是我的代码:

$(elems).not("[disabled]").each(function() {
    let n = $(this).attr('tabindex');
    if ((typeof n == typeof undefined || n == !1) && ($(this).text().trim().length)) {
        $(this).attr('tabindex', '0')
    }
});

用户是盲人，通过TAB浏览页面，通过语音合成朗读文本。

1#这个案例没问题

    <div>Example text</div>
--> <div tabindex="0">Example text</div>

2# 这种情况是有问题的(首先关注 div 然后关注 p 所以“示例文本”读了两遍)

    <div>
        <p>Example text</p>
    </div>

--> <div tabindex="0">
        <p tabindex="0">Example text</p>
    </div>

2# 这种情况更有问题(“第一个文本第二个文本”再次读取“第二个文本”)

<div tabindex="0">First text
    <p tabindex="0">Second text</p>
</div>

我希望先阅读“第一个文本”，然后阅读“第二个文本”。

我有很多解决方案，但笨重且不优雅。如果您有一个简单的，请先谢谢您!

基本上，我只想在带有文本的标签上应用 tabindex，除非它是文本格式化选项卡(b、i、u、strong...)。示例:

<div>
  <p tabindex="0">This is <b>great</b> !</p>
</div>

Answer 1

从我对你的问题的了解来看，听起来主要问题是 jQuery 的 text() 函数在元素具有子元素的情况下返回太多文本。您特别希望能够在以下示例中将“foo”和“baz”与“bar”分开:

<div>foo<p>bar</p>baz</div>

如果是这种情况，那么您需要停止使用“元素”并开始使用 Nodes 。节点的粒度更加细化，可以让您更深入地了解 DOM 的实际情况。例如上面会被解析成大致如下的节点树:

element: div
    text: "foo"
    element: p
        text: "bar"
    text: "baz"

节点更难使用，因为有更多不同类型、不同功能的节点。不过，当您需要更多控制权时，通常必须承担这一成本。

以下是您如何实现目标的一个示例，但您可能需要根据您的特定需求进行调整。

var root = document.getElementById('root');

processChildNodes( root );

// Log the resulting HTML to the console
// so that we can see the tab index attribute:
console.log( root.innerHTML );

function processChildNodes(parent){
  var child;
  // Get either the first child of the parent or the next sibling of
  // the current child.
  // If we don't have any children or we run out of siblings, then
  // we're done here.
  while ( child = child ? child.nextSibling : parent.firstChild ){
    // If the node is disabled, then skip it.
    // Maybe this should be data-disabled?
    switch (child.nodeType){
      case Node.ELEMENT_NODE:
        // If the current node is an element, then set the tabIndex
        // and process the children.
        if ( !child.hasAttribute('disabled') ){
          child.setAttribute( 'tabindex',  '0' );
          processChildNodes( child );
        }
        break;
      case Node.TEXT_NODE:
        // If the current node is text, then "read" the text.
        // You don't have an example of how this is supposed to work,
        // so I'll just print it to the console.
        var text = (child.nodeValue || "").trim();
        if (text.length > 0) console.log( 'reading: ' + text );
        break;
    }
  }
}

<div id="root">
  <div>Example text 1</div>

  <div>
    <p>Example text 2</p>
  </div>

  <div>
      First text
      <p>Second text</p>
      Third text
      <p>
        Fourth text
        <span>Fifth text</span>
      </p>
      <p disabled>
        Skip this one.
      </p>
  </div>
</div>