Question

我有这个HTML

<ul class="ui-autocomplete-list smart-close-iztgn224" style="opacity: 1; visibility: visible;  position: absolute; top: 141px; left: 309px;">
        <li data-value="1" class="visible">All</li>
        <li data-value="1" class="visible">John (123)</li>
        <li data-value="1" class="visible">Mary (456)</li>
        <li data-value="1" class="visible">Kelly (987)</li>

父级有“ui-autocomplete-list smart-close-iztgn224”类，它有4个孩子。

我可以使用什么CSS选择器来抓取包含“Mary”的孩子？

我尝试使用

document.querySelector("ul.ui-autocomplete-list > li.visible");

但我不知道如何通过innerHTML值来抓住孩子。

感谢。

Answer 1

css选择器不提供按.textContent或.innerHTML选择元素的方法。您可以添加其他data-*属性，或在JSON属性使用data-*并使用属性选择器

＆＃13;

document.querySelector("li[data-name='Mary']").style.color = "sienna";

＆＃13;

<ul class="ui-autocomplete-list smart-close-iztgn224" style="opacity: 1; visibility: visible;  position: absolute;">
  <li data-value="1" data-name="All" class="visible">All</li>
  <li data-value="1" data-name="John" class="visible">John (123)</li>
  <li data-value="1" data-name="Mary" class="visible">Mary (456)</li>
  <li data-value="1" data-name="Kelly" class="visible">Kelly (987)</li>
</ul>

＆＃13;

document.querySelector("li[data-props*='Mary']").style.color = "sienna";

＆＃13;

<ul class="ui-autocomplete-list smart-close-iztgn224" style="opacity: 1; visibility: visible;  position: absolute;">
  <li data-props='{"value":"1", "name":"All"}' class="visible">All</li>
  <li data-props='{"value":"1", "name":"John"}' class="visible">John (123)</li>
  <li data-props='{"value":"1", "name":"Mary"}' class="visible">Mary (456)</li>
  <li data-props='{"value":"1", "name":"Kelly"}' class="visible">Kelly (987)</li>
</ul>

＆＃13;

Answer 2

您无法使用CSS选择器获取innerHTML值。但是，如果您明智，则可以获取所有li元素并使用forEach()来定位所需元素。

＆＃13;

var elements = document.querySelectorAll("ul.ui-autocomplete-list > li.visible");
elements.forEach(function(elem) {
  if (elem.textContent.includes('Mary'))
    elem.classList.add('red')
});

＆＃13;

.red {
  color: red
}

＆＃13;

<ul class="ui-autocomplete-list smart-close-iztgn224" style="opacity: 1; visibility: visible;  position: absolute; top: 141px; left: 309px;">
  <li data-value="1" class="visible">All</li>
  <li data-value="1" class="visible">John (123)</li>
  <li data-value="1" class="visible">Mary (456)</li>
  <li data-value="1" class="visible">Kelly (987)</li>
</ul>

＆＃13;

Answer 3

您无法使用css选择器获取innerHTML值，而 querySelector使用CSS选择器。如果您可以使用Jquery，那么可以使用contains Selector完成它。

    if(messages.count > 0)
    {
        NSEntityDescription *entityDescription = [NSEntityDescription entityForName:@"Messages" inManagedObjectContext:dbHandler.managedObjectContext];
        NSBatchUpdateRequest *request= [[NSBatchUpdateRequest alloc] initWithEntity:entityDescription];
        request.predicate = [NSPredicate predicateWithFormat:@"contactId==%@ and groupId==0",contactId];
        request.resultType = NSUpdatedObjectsCountResultType;
        request.propertiesToUpdate = @{
                                   @"status" : @(5)
                                   };
        NSError * errorSave = nil;
        NSBatchUpdateResult *updateResult = (NSBatchUpdateResult *)[dbHandler.managedObjectContext executeRequest:request error:&errorSave];
        NSLog(@"Error(IF_ANY) : %@ :: %i objects updated", errorSave.description, updateResult.result,updateResult.result);
    }

$("ul.ui-autocomplete-list > li:contains('John')").css( "color", "red" );

您可以做的另一件事如果您只能使用JS，则可以将<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="ui-autocomplete-list smart-close-iztgn224" style="opacity: 1; visibility: visible; position: absolute; top: 141px; left: 309px;"> <li data-value="1" class="visible">All</li> <li data-value="1" class="visible">John (123)</li> <li data-value="1" class="visible">Mary (456)</li> <li data-value="1" class="visible">Kelly (987)</li> </ul>添加到每个data-attribute元素，并根据其li值

Answer 4

如果你可以使用jQuery，你可以使用contains selector：

$(("ul.ui-autocomplete-list > li:contains('mary')"))

对于原生javascript，这有效：

var mary = [].slice.call(document.querySelectorAll("ul.ui-autocomplete-list > li.visible")).filter(function (item){
    return item.innerText.includes("mary");
})[0];

如何使用CSS Selector通过innerHTML值获取Child？

4 个答案: